[Solved]-Cannot use JSX unless the '--jsx' flag is provided-Reactjs

You can install the npm packages again with the npm install comment. It worked for me.

You can create a .vscode/settings.json file at the root of you project. In it type { "typescript.tsdk": "node_modules\\typescript\\lib" } you're good to go.

The issue is that vscode is using an old Typescript version.

image showing code on vscode

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

In my case, none of the above did work. My problem was that the location of tsconfig.json was not the project root. So that jest could not read .jsx files. I solved it just symlink tsconfig.json to the project root. There might be better solution. Let me know if you have one.

I had to add my whole app into include.

So my tsconfig.json looks like this:

{
    "compilerOptions": {
    "module": "commonjs",
    "declaration": true,
    "removeComments": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "target": "es6",
    "sourceMap": true,
    "outDir": "./dist",
    "baseUrl": "./",
    "incremental": true,
    "jsx": "react",
    "allowJs": true
  },
  "include": ["./"]
}

The below error I am getting after running yarn start:

> multi-step-form-typescript@0.1.0 start /home/ehsan/Documents/GitHub/multi-step-form-typescript
> react-scripts start

/home/ehsan/Documents/GitHub/multi-step-form-typescript/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:239
      appTsConfig.compilerOptions[option] = value;
                                          ^

TypeError: Cannot assign to read only property 'jsx' of object '#<Object>'
    at verifyTypeScriptSetup (/home/ehsan/Documents/GitHub/multi-step-form-typescript/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:239:43)
    at Object.<anonymous> (/home/ehsan/Documents/GitHub/multi-step-form-typescript/node_modules/react-scripts/scripts/start.js:31:1)
    at Module._compile (internal/modules/cjs/loader.js:1137:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
    at Module.load (internal/modules/cjs/loader.js:985:32)
    at Function.Module._load (internal/modules/cjs/loader.js:878:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
    at internal/main/run_main_module.js:17:47
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! multi-step-form-typescript@0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the multi-step-form-typescript@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/ehsan/.npm/_logs/2020-11-22T18_20_20_546Z-debug.log

So what you need to do in order to get rid of this

on your terminal click on the error link

/home/ehsan/Documents/GitHub/multi-step-form-typescript/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:239 appTsConfig.compilerOptions[option] = value;

and then change the 239 lines to

else if (parsedCompilerOptions[option] !== valueToCheck && option !== "jsx")

Now after changing this goto tsconfig.json

and than replace "jsx": "react-jsx" to "jsx": "react"

now run your project with sudo yarn start

It's work for me, hope this will work for you too :)

I followed the "Simpler Solution" mentioned here https://github.com/facebook/create-react-app/issues/10144#issuecomment-733278351

"...update the TS version in package.json to 4.1.2"

and then restarted VS Code.

Simply restarting the TS server with the command palette didn't do it for me.

I didn't need any other steps.

In my case, restarting VSCode and upgrading typescript and run-scripts to the matching versions were not enough. Rebuilding after deleting the .eslintcache file finally resolved the error.

This is a follow-up fo the answer by @basarat, because he partially solved the issues in my case. The problem I was having was error TS6046: Argument for '--jsx' option must be: 'preserve', 'react-native', 'react'. I solved it as follows:

1. Restart your IDE
2. Delete your tsconfig.json
3. Re-initialise your tsconfig.json using ```tsc --init````

Maybe step one could be skipped, but I did not investigate this.

My Experience

I was converting an existing newly created NextJS App to use TS following the official next guide and when i reached to the part where the pages/_app.tsx needed to be modified.

I followed the VSCode prompt to add --jsx flag, which added the following lines to the next.config.js file:

module.exports = {
  reactStrictMode: all,
};

which resulted in another error:

Failed to load next.config.js, see more info here https://nextjs.org/docs/messages/next-config-error
ReferenceError: all is not defined

Upon removing the lines from the next.config.js file and restarting VSCode and rerunning yarn dev or npm run dev and Voila! It started working!

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.

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.

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

I just fixed this problem with a bud of mine who was reinstalling and reconfiguring every damn thing to fix it. We tried every fix on the internet (I even had to solve this myself, so I was really confused why we could fix it for him).

The problem turned out to be this TypeScript God extension. Once it was disabled, and subsequently removed, the issue was solved.

Beware the False God!

I have a monorepo and for me Webstorm automagically had chosen an older version of TypeScript for a sub-package. The fix was clicking on TypeScript X.X.X in the footer and choose Configure TypeScript ... and choose the right package, that worked for me in Webstorm 2021.1

Adding { "compilerOptions": { "jsx": "react" } } to 'tsconfig.json' file and restarting the editor resolved the problem.

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

To solve this for all future projects, you can install JavaScript and TypeScript Nightly extension for VSCode.

I my case none of the solutions were working, so I looked the version of ECMA Scrypt. My version was ec5, you can check here -> tsconfig.json. So I tried to switch the target: "es5" to target: "es2017" an it seems to handle the problem, with anything comes up again, I'll edit this comment

Solution for Sublime Text:

1. Make sure your package.json uses Typescript >= v4.1.2
2. Uninstall the Sublime Text "Typescript" package through Package Control
   • At time of writing, it bundles Typescript v3.x
3. Open a terminal in the Sublime Text "Packages" directory.
   • cd "~/Library/Application Support/Sublime Text 3/Packages"
4. Clone the Typescript-Sublime-Plugin repo into your Packages directory:
   • git clone https://github.com/microsoft/TypeScript-Sublime-Plugin TypeScript
5. Open User Settings: Sublime Text > Preferences > Settings
6. Add "typescript_tsdk": "node_modules/typescript/lib"
   • This tells the Sublime Typescript plugin to use the project version of Typescript rather than its bundled version.
7. Restart Sublime Text
   • Unlike most Sublime Text settings, this one requires a restart in order to restart the Typescript server.

Reference:
https://github.com/microsoft/TypeScript-Sublime-Plugin/issues/538

For those who use Visual Studio 2019, you can fix it by doing all following:

1. In tsconfig.json, have this part

"include": [
    "./src/**/*.ts"
]

2. Update Typescript sdk in C:\Program Files (x86)\Microsoft SDKs\TypeScript
   I had had version 4.0. I needed to update it to 4.1 (more clearly, 4.1.2) by
   1. deleting the Typescript folder
   2. In Visual Studio 2019, Extensions > Manage Extensions, install Typescript 4.1 for Visual Studio

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.

adding "jsx": "react" to jsconfig.json didn't work for me but "jsx": "preserve" did:

jsconfig.json / tsconfig.json:

{
  "compilerOptions": {
    "jsx": "preserve"
  }
}

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.

If you are seeing this issue after running create-react-app with Typescript You can solve this problem by adding "typescript.tsdk": "node_modules/typescript/lib" to .vscode/settings.json.

For IntelliSense, if you use "jsx": "react-jsx" you need to switch your workspace to use TS 4.1+

Or visually, simply go down to the blue task bar and select the Typescript version (Probably 4.x.x something), then select "Select TypeScript Version".

Then select "Use Workspace Version version" which should reference node_modules/typescript/lib

April 2021, and this issue still persist. I am using react-boilerplate-cra-template with react 17.02.

This is an issue with VSCode, it uses its in-built typescript by default. You just need to open a .tsx file and

1. Press: Ctrl + Shift + P
2. Enter: Typescript: Select typescript version...
3. Select: Use workspace version.

In my case, the issue was that VSCode generated an empty tsconfig.json file which, of course, did nothing.

I added this to tsconfig.json from Typescript's React Page:

{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "commonjs",
        "target": "es6",
        "jsx": "react"
    }
}

...then hit save and VSCode took it from there.

create-react-app is broken out of the box. AS OF 2022 MAY

Inside of tsconfig, include was set only to /src, Change to:

  "include": [
    "./src/**/*.ts"
  ]

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.

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:

1. Go to the command palette CTRL+Shift+P (Or ⌘+Shift+P on Mac).
2. Choose "TypeScript: Select a TypeScript Version...".
3. Choose "Use workspace Version".

PS: This option doesn't show though unless you're on any .tsx file (thanks @awran5 for your comment and good catch)