0
634
ViewsCannot use JSX unless the '--jsx' flag is provided
I have looked around a bit for a solution to this problem. All of them suggest adding "jsx": "react" to your tsconfig.json file. Which I have done. Another one was to add "include: []", which I have also done. However, I am still getting the error when I am trying to edit .tsxfiles. Below is my tsconfig file.
{
"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"
]
}
Any suggestions would be helpful. I am using babel 7 to compile all the code with the env, react and typescript presets. If you guys need more files to help debug this, let me know.
3 answers
Answer question0
Every time I run npm start, it overrides whatever I configure in {jsx: ...} with react-jsx in order to be compatible with JSX transform in React 17.
The following changes are being made to your tsconfig.json file:
- compilerOptions.jsx must be react-jsx (to support the new JSX transform in React 17)
The problem is VSCode using an older version of typescript (4.0.3), while the typescript version shipped with the project is (4.1.2).
The following did the trick for me:
- Go to the command palette CTRL+Shift+P (Or ⌘+Shift+P on Mac).
- Choose "TypeScript: Select a TypeScript Version...".
- Choose "Use workspace Version".
0
Cannot use JSX unless the '--jsx' flag is provided
Restart your IDE. Sometimes tsconfig.json changes aren't immediately picked up 🌹
0
For whoever reading, go to the tsconfig.json and change that line from react-jsx to react:
{
"compilerOptions": {
"jsx": "react"
}
}
bonus: try also setting the IDE TS version to the latest (atm 4.2), in vscode CMD + SHIFT + P and change it from there.