Cannot use JSX unless the '--jsx' flag is

Question

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.

Answer 1

This answer is regarding VS Code and this particular error persisting in that IDE. (Someone may find this useful)

If you're using something like Webpack or some other such tooling you may still get this error even if your tsconfig has the compiler option for jsx set to React.

There is a solution to this. The problem is VS Code has built in auto detection for tsc.

To get rid of the error in the editor you can put this in your User Settings:

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

Just note that you will no longer get tsc auto detection but if you're primarily using tooling like Webpack or handling the command yourself with flags then this isn't that big of a deal.

Note: Only do this if the error is persisting in VS Code. To ensure this behavior is persisting reload the windows and restart the editor after configuring your tsconfig.json file.

Answer 2

Restarting my IDE didn't help. Restarting the TypeScript server did resolve it tho.

Answer 3

I got this same error, and just figured out how to resolve it. The problem was that there was a jsconfig.json file which caused the TypeScript compiler to ignore the tsconfig.json file.

To determine if you have the same problem, in your IDE (I'm using VS Code), load a file which has the error in your editor, then bring up the Command Palette and enter "TypeScript: Go to Project Configuration". If it opens up jsconfig.json, then delete that file and restart your IDE. If it opens the tsconfig.json file this time, you are golden.