Reputation: 5790

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.

Upvotes: 552

Answers (30)

Mel Macaluso

Reputation: 3810

For whoever reading, go to the tsconfig.json and change that line from react-jsx to react:

{
  "compilerOptions": {
    "jsx": "react" // or "react-native"
  }
}

bonus: try also setting the IDE TS version to the latest (atm 4.2), in vscode CMD + SHIFT + P and change it from there.

Upvotes: 276

Yuvraj Patil

Reputation: 8774

In my case it was due to conflict between pnpm and yarn.

Step 1: Delete all yarn related file and try fresh pnpm

Delete node_modules folder.
Delete yarn.lock file.

Step 2: Use workspace version of TypeScript.

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

Upvotes: 0

Mahmoud

Reputation: 11469

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

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

PS 2: you have to restart VSCode in order to take effect after creating tsconfig.json file

Upvotes: 964

João Augusto Tonial Laner

Reputation: 117

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, if anything comes up again, I'll edit this comment

Upvotes: 4

basarat

Reputation: 276235

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

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

Upvotes: 758

Woodchuck

Reputation: 4454

I got this same error when migrating my React app to use TypeScript. I resolved it by adding to my tsconfig.json the jsx compiler option with a value of react-jsx:

{
  "compilerOptions": {
    ...
    "jsx": "react-jsx"
  }
}

A popular answer above suggests using the react value instead, which also resolves the error:

{
  "compilerOptions": {
    ...
    "jsx": "react"
  }
}

But I have seen various sources that seem to indicate the react-jsx option is preferable, so figured that approach is worth mentioning as well.

Not sure why neither of these options gets initially included in the tsconfig.json that gets generated when using the tsc init option:

npx tsc --init

Upvotes: 17

ShoaibShebi

Reputation: 145

Just simply replace your tsconfig.json with this script

{
  "compilerOptions": {
    "target": "es6",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src/**/*"]
}

and you will be all good

Cheers

Upvotes: -2

DamianoPantani

Reputation: 1386

Restarting your IDE seems too brutal, and doesn't always work. You want to Restart TS Server instead:

Note: the option will only show up if your IDE has any TS related file open

Upvotes: 17

Raydot

Reputation: 1586

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.

EDIT: Since I originally posted this answer generic tsconfig files have become more widely available. I've posted a more expanded version as a gist, if you'd like to understand the options.

Upvotes: 50

GorvGoyl

Reputation: 49570

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

jsconfig.json / tsconfig.json:

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

Upvotes: 31

Samet Karaca

Reputation: 1

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

Upvotes: -2

Gabriel Petersson

Reputation: 10482

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"
  ]

Upvotes: 124

Abhishek Sah

Reputation: 411

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!

Upvotes: 1

ArunaT

Reputation: 31

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

Upvotes: 3

emccracken

Reputation: 860

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

Upvotes: 2

Basitomania

Reputation: 11

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

Upvotes: 0

Johannes Ströbele

Reputation: 19

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:

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

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

Upvotes: 1

Raj

Reputation: 1120

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

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

Upvotes: 20

Ace

Reputation: 1146

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!

Upvotes: 3

Raine Revere

Reputation: 33765

Solution for Sublime Text:

Make sure your package.json uses Typescript >= v4.1.2
Uninstall the Sublime Text "Typescript" package through Package Control
- At time of writing, it bundles Typescript v3.x
Open a terminal in the Sublime Text "Packages" directory.
- cd "~/Library/Application Support/Sublime Text 3/Packages"
Clone the Typescript-Sublime-Plugin repo into your Packages directory:
- git clone https://github.com/microsoft/TypeScript-Sublime-Plugin TypeScript
Open User Settings: Sublime Text > Preferences > Settings
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.
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

Upvotes: 4

Long Do Thanh

Reputation: 406

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

In tsconfig.json, have this part

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

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

Upvotes: 6

David Bauer

Reputation: 122

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": ["./"]
}

Upvotes: 2

mmizutani

Reputation: 337

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.

Upvotes: 1

Mayowa Daniel

Reputation: 427

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.

Upvotes: 1

kecheon

Reputation: 21

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.

Upvotes: 1

Petras V.

Reputation: 187

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

Upvotes: 5

Karl Taylor

Reputation: 5279

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

Upvotes: 14

Ahsan Shakeel

Reputation: 11

The below error I am getting after running yarn start:

> [email protected] 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! [email protected] start: `react-scripts start`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] 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 :)

Upvotes: 1

Gunther

Reputation: 581

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

Upvotes: 4

bluenote10

Reputation: 26709

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.

Upvotes: 7

Cannot use JSX unless the &#39;--jsx&#39; flag is provided

Answers (30)

My Experience

Solution for Sublime Text:

Related Questions

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