Cannot 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.

回答1:

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

Restart your IDE. Sometimes tsconfig.json changes aren't immediately picked up 🌹

回答2:

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.

回答3:

Restarting my IDE in my case was the fix.After restarting a message box popped up and it was showing that i don't have any typescript installed, would you like to install TypeScript 3.3? I installed it and now its working perfectly.See here for output window

回答4:

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.

回答5:

I was getting this error even when running npx tsc --jsx preserve so the --jsx was definitely specified.

In my case this was caused by having incremental: true in the tsconfig. Apparently in incremental mode tsc may ignore the --jsx setting, and use information from previous builds instead (where --jsx was still disabled). As a solution I turned of incremental compilation temporarily, recompiled, and re-enabled it. Probably deleting the build artifacts might also work.

回答6:

This link was helpful to resolve this issue: https://staxmanade.com/2015/08/playing-with-typescript-and-jsx/

Refer the section: Fixing error TS17004: Cannot use JSX unless the '--jsx' flag is provided.

The next error is new to me, but it makes some sense, so I add the --jsx flag to tsc and try tsc --jsx helloWorld.tsx, but looks like I missed a parameter to --jsx.

tsc --jsx helloWorld.tsx message TS6081: Argument for '--jsx' must be 'preserve' or 'react'. In the current iteration of TypeScript 1.6 appears to have two options for --jsx, both preserve or react.

preserve will keep the jsx in the output. I presume this is so you can use tools like JSX to actually provide the translation. react will remove the jsx syntax and turn it in to plain javascript so in the TSX file would become React.createElement("div", null). By passing the react option, here's where we end up:

tsc --jsx react helloWorld.tsx helloWorld.tsx(11,14): error TS2607: JSX element class does not support attributes because it does not have a 'props' property helloWorld.tsx(11,44): error TS2304: Cannot find name 'mountNode'. I'm going to tackle the last error next, as initially I didn't understand the JSX error above.

回答7:

In my case, I tried all the tsconfig.json, Project Properties dialog, restarting IDE, checking installed TypeScript version, etc, and it still had this error. Come to find out the dev that made the project added conditional properties to the project file, such that TypeScriptJSXEmit is not defined in all configurations (which confused the Project Properties dialog).

Here's an excerpt from my project file showing the issue:

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

来源：https://stackoverflow.com/questions/50432556/cannot-use-jsx-unless-the-jsx-flag-is-provided