Impossible d'utiliser JSX à moins que l'option '--jsx' ne soit fournie.

Question

J'ai cherché un peu partout une solution à ce problème. Toutes les solutions suggèrent d'ajouter "jsx": "react" à votre fichier tsconfig.json. Ce que j'ai fait. Une autre consistait à ajouter "include: []" ce que j'ai également fait. Cependant, j'obtiens toujours l'erreur lorsque j'essaie de modifier les données. .tsx fichiers. Voici 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 presets env, react et typescript. Si vous avez besoin de plus de fichiers pour aider au débogage, faites-le moi savoir.

Answer 1

Impossible d'utiliser JSX à moins que l'option '--jsx' ne soit fournie.

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

Answer 2

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

Si vous utilisez quelque chose comme Webpack ou un autre outil de ce type, vous risquez d'obtenir cette erreur même si l'option de compilation pour jsx de votre tsconfig est définie sur React.

Il existe une solution à ce problème. Le problème est que VS Code a intégré une détection automatique pour les tsc.

Pour supprimer l'erreur dans l'éditeur, vous pouvez indiquer ceci dans vos paramètres d'utilisateur :

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

Notez que vous n'aurez plus la détection automatique de tsc, mais si vous utilisez principalement des outils comme Webpack ou si vous gérez vous-même la commande avec des drapeaux, ce n'est pas un gros problème.

Note : Ne faites ceci que si l'erreur persiste dans VS Code. Pour vous assurer que ce comportement persiste, rechargez Windows et redémarrez l'éditeur après avoir configuré votre fichier tsconfig.json.

Answer 3

J'obtenais cette erreur même en exécutant npx tsc --jsx preserve donc le --jsx a bien été spécifié.

Dans mon cas, cela a été causé par le fait d'avoir incremental: true dans le tsconfig. Apparemment en mode incrémental tsc peut ignorer le --jsx et utiliser les informations des constructions précédentes à la place (lorsque le paramètre --jsx était toujours désactivé). Comme solution, j'ai désactivé temporairement la compilation incrémentale, j'ai recompilé et je l'ai réactivée. La suppression des artefacts de construction pourrait probablement aussi fonctionner.

Answer 4

Après le redémarrage, une boîte de message s'est affichée et indiquait que je n'ai pas de script de type installé, voulez-vous installer TypeScript 3.3 ? Je l'ai installé et maintenant il fonctionne parfaitement. Voir ici pour la fenêtre de sortie

Answer 5

J'ai eu cette même erreur, et je viens de trouver comment la résoudre. Le problème était qu'il y avait un jsconfig.json qui a fait que le compilateur TypeScript a ignoré le fichier tsconfig.json fichier.

Pour déterminer si vous avez le même problème, dans votre IDE (j'utilise VS Code), chargez un fichier qui a l'erreur dans votre éditeur, puis faites apparaître la palette de commande et entrez "TypeScript : Go to Project Configuration". Si cela s'ouvre jsconfig.json puis supprimez ce fichier et redémarrez votre IDE. S'il ouvre le tsconfig.json le dossier cette fois, vous êtes en or.