web-dev-qa-db-fra.com

Utilisation de JSX impossible si l'indicateur '--jsx' est fourni

J'ai un peu cherché une solution à ce problème. Tous suggèrent d'ajouter "jsx": "react" dans votre fichier tsconfig.json. Ce que j'ai fait. Un autre était d'ajouter "include: []", ce que j'ai aussi fait. Cependant, je reçois toujours l'erreur lorsque j'essaie de modifier .tsxdes dossiers. Ci-dessous, mon fichier tsconfig.

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "allowJs": true,
        "checkJs": false,
        "jsx": "react",
        "outDir": "./build",
        "rootDir": "./lib",
        "removeComments": true,
        "noEmit": true,
        "pretty": true,
        "skipLibCheck": true,
        "strict": true,
        "moduleResolution": "node",
        "esModuleInterop": true
    },
    "include": [
        "./lib/**/*"
    ],
    "exclude": [
        "node_modules"
    ]
}

Toute suggestion serait utile. J'utilise babel 7 pour compiler tout le code avec les préconfigurations env, react et TypeScript. Si vous avez besoin de plus de fichiers pour résoudre ce problème, faites-le moi savoir.

reactjstypescriptjsxtsx
28
AJDEV

Utilisation de JSX impossible si l'indicateur '--jsx' est fourni

Redémarrez votre IDE. Parfois, les modifications de tsconfig.json ne sont pas immédiatement prises en compte ????

52
basarat

Cette réponse concerne VS Code et cette erreur particulière persistant dans cet IDE. (Quelqu'un peut trouver cela utile)

Si vous utilisez quelque chose comme Webpack ou un autre outil du même genre, vous pouvez toujours avoir cette erreur même si votre tsconfig a l'option du compilateur pour jsx définie sur React.

Il y a une solution à cela. Le problème est que VS Code a une détection automatique intégrée pour tsc.

Pour vous débarrasser de l'erreur dans l'éditeur, vous pouvez le mettre dans vos paramètres utilisateur:

{
    "TypeScript.tsc.autoDetect": "off"
}

Notez simplement que vous n'obtiendrez plus la détection automatique tsc, mais si vous utilisez principalement des outils tels que Webpack ou que vous gérez vous-même la commande avec des drapeaux, ce n'est pas si grave.

Remarque: Ne le faites que si l'erreur persiste dans VS Code. Pour vous assurer que ce comportement persiste, rechargez les fenêtres et redémarrez l'éditeur après avoir configuré votre fichier tsconfig.json.

3
RonniePettyII

Redémarrage de mon IDE dans mon cas était le correctif. Après avoir redémarré une boîte de message et montré que je n'ai aucun TypeScript installé, souhaitez-vous installer TypeScript 3.3? J'ai installé et maintenant son fonctionne parfaitement . Voir ici pour la fenêtre de sortie

1
FireFly0

J'ai eu la même erreur et j'ai juste trouvé comment le résoudre. Le problème était qu'il y avait un jsconfig.json fichier qui a amené le compilateur TypeScript à ignorer le tsconfig.json fichier.

Pour déterminer si vous avez le même problème, dans votre IDE (j'utilise du code VS), chargez un fichier contenant l'erreur dans votre éditeur, puis affichez la palette de commandes et entrez " TypeScript: Aller à la configuration du projet ". S'il ouvre jsconfig.json, puis supprimez ce fichier et redémarrez votre IDE. Si cela ouvre le tsconfig.json file cette fois, vous êtes en or.

1
Rosco

Ce lien a été utile pour résoudre ce problème: https://staxmanade.com/2015/08/playing-with-TypeScript-and-jsx/

Reportez-vous à la section: Erreur de correction TS17004: impossible d'utiliser JSX sans l'indicateur '--jsx' fourni.

La prochaine erreur est nouvelle pour moi, mais cela a du sens, donc j’ajoute l’indicateur --jsx à tsc et je tente d’essayer tsc --jsx helloWorld.tsx, mais il me semble que j’ai manqué un paramètre de --jsx.

tsc --jsx helloWorld.tsx message TS6081: l'argument pour '--jsx' doit être 'préserver' ou 'réagir'. Dans l'itération actuelle de TypeScript 1.6, il semble y avoir deux options pour --jsx, à la fois préserver ou réagir.

preserve conservera le jsx dans la sortie. Je suppose que c'est pour que vous puissiez utiliser des outils tels que JSX pour fournir la traduction. react supprime la syntaxe jsx et le convertit en javascript afin que le fichier TSX devienne React.createElement ("div", null). En passant l'option réact, voici où nous nous retrouvons:

tsc --jsx réagir helloWorld.tsx helloWorld.tsx (11,14): erreur TS2607: la classe d’élément JSX ne prend pas en charge les attributs car elle ne possède pas de propriété 'props' helloWorld.tsx (11,44): erreur TS2304: impossible trouvez le nom 'mountNode'. Je vais m'attaquer à la dernière erreur, car je n'avais pas compris l'erreur JSX ci-dessus.

0
Amit Chaurasia

Dans mon cas, j'ai essayé tous les tsconfig.json, Boîte de dialogue Propriétés du projet, redémarrage de IDE, vérification de la version TypeScript installée, etc., et le problème persiste. Venez découvrir le dev qui a amené le projet à ajouter des propriétés conditionnelles au fichier de projet, telles que TypeScriptJSXEmit ne soit pas défini dans toutes les configurations (ce qui a confondu la boîte de dialogue Propriétés du projet).

Voici un extrait de mon dossier de projet illustrant le problème:

...
  <PropertyGroup Condition="'$(Configuration)' == 'QA'">
    <TypeScriptTarget>ES5</TypeScriptTarget>
    <TypeScriptJSXEmit>React</TypeScriptJSXEmit>
...
0
QuickDanger

J'obtenais cette erreur même en exécutant npx tsc --jsx preserve, Donc le --jsx A été définitivement spécifié.

Dans mon cas, cela est dû au fait que incremental: true Figure dans le fichier tsconfig. Apparemment, en mode incrémentiel, le paramètre --jsx Doit être ignoré et utiliser à la place les informations des versions précédentes (où --jsx Était toujours désactivé). En guise de solution, je me suis tourné temporairement vers la compilation incrémentielle, je l'ai recompilée et réactivée. Probablement, la suppression des artefacts de construction pourrait également fonctionner.

0
bluenote10