Problem with Visual Studio Code using "react-jsx" as jsx value with create-react-app

Question

I'm struggling with following "error" in VSCode :

Argument for '--jsx' option must be: 'preserve', 'react-native', 'react'

Hence, react-scripts (create-react-app) automatically sets the jsx key to react-jsx value, when react value seems to work.

Actually, the code works perfectly and displays the page I want, but the IDE is underlining kinda everything as errors, saying :

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

Here is my tsconfig.json :

{
  "compilerOptions": {
    "target": "es5",
    "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 my package.json (default one provided by create-react-app + packages updated) :

{
  "name": "front-office",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.6",
    "@testing-library/react": "^11.2.2",
    "@testing-library/user-event": "^12.2.2",
    "@types/jest": "^26.0.15",
    "@types/node": "^14.14.9",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "bootstrap": "^4.5.3",
    "react": "^17.0.1",
    "react-bootstrap": "^1.4.0",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.1",
    "typescript": "^4.1.2",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

I'm using the latest version of Typescript, and I updated all my packages with ncu, closed/opened VSCode (works sometimes with tsconfig !) and nothing seems to resolve that.

I'm pretty sure it's a VSCode problem, but I'm running out of ideas about how to resolve that.

Any of you guys got ideas ?

Edit:

If you followed the above steps and VSCode still shows the "-jsx" error, make sure you have disabled the 'TypeScript God' extension (and any other TS extension until the issue no longer appears).

marksfrancis · Accepted Answer · 2020-11-23 21:23:45Z

144

This is because VSCode's Typescript version is not using the newest babel features that create-react-app uses by default.

You can change VS Code to use the workspace's version of Typescript instead, which will fix this issue.

Open a TypeScript or JavaScript file and click on the TypeScript version number in the Status Bar. A message box will appear asking you which version of TypeScript VS Code should use

Select "Use Workspace Version" to use the newer Create React App typescript version.

answered Nov 23, 2020 at 21:23

marksfrancis

1,7521 gold badge14 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Denis Lebon Over a year ago

Seems it was a mix between that and the extension I was using (TypeScript God) that may not be up to date. Anyway, it solved my problem, thanks !

Narigo Over a year ago

How can I change the workspace version if the project is split into multiple sub-folders? VSCode doesn't seem to pick up node_modules in sub directories or at least I don't see other versions available

S.. Over a year ago

@Narigo I installed the version I wanted globally (npm i -g [email protected]) then added this line to vscode settings json file "typescript.tsdk": "/home/yourusername/.nvm/versions/node/v10.15.1/lib/node_modules/typescript/lib" Substitute /home/yourusername/.nvm/versions/node/v10.15.1/lib/node_modules for your global npm node_modules folder path (find out with npm root -g)

SalahAdDin Over a year ago

My VSCode is using an upper version than one from my project, and It still has problems.

Rody Davis Over a year ago

For me it was changing my settings.json to use the local typescript version: "typescript.tsdk": "./node_modules/typescript/lib"

|

Attila Szeremi · Accepted Answer · 2020-12-01 12:27:37Z

29

In PhpStorm (and the same is probably true for WebStorm) I got it to not complain about "react-jsx" as the value by ticking "Always download the most recent version of schemas" in Remote JSON Schemas.

answered Dec 1, 2020 at 12:27

Attila Szeremi

5,4986 gold badges43 silver badges70 bronze badges

2 Comments

Devorein Over a year ago

I believe that the question was regarding vscode ....

Attila Szeremi Over a year ago

True, since I myself found this issue searching for PhpStorm, I thought maybe this could help others as well. Also this could help in being a clue regarding vscode that the issue will have something to do with JSON schemas probably being old.

Vijin Paulraj · Accepted Answer · 2021-05-10 08:29:45Z

6

As mentioned by others, this is an open issue with create-react-app (CRA) script. However, none of the above mentioned solution worked for me. The only solution that works for me is adding the below config in .env file (in project root).

DISABLE_NEW_JSX_TRANSFORM=true

answered May 10, 2021 at 8:29

Vijin Paulraj

4,6885 gold badges44 silver badges55 bronze badges

Comments

Eric Aya · Accepted Answer · 2022-08-09 15:28:55Z

4

I know this can be obvious for the majority but I always forget to use .tsx file extension in React and then I'm hitting my head trying to understand why the JSX code is throwing an error.

So, make sure you are using .tsx extension and NOT .ts !

edited Aug 9, 2022 at 15:28

Eric Aya

70.2k36 gold badges190 silver badges266 bronze badges

answered Aug 9, 2022 at 14:59

Gass

9,6405 gold badges47 silver badges53 bronze badges

Comments

Ilias.P · Accepted Answer · 2020-11-26 17:23:59Z

2

For the ones using VS 2019 I had to install typescript 4.1 for visual studio from here: https://marketplace.visualstudio.com/items?itemName=TypeScriptTeam.TypeScript-41

Then it worked fine by using the new jsx setting in the compilerOptions etc.

answered Nov 26, 2020 at 17:23

Ilias.P

3092 silver badges8 bronze badges

Comments

Luillyfe · Accepted Answer · 2023-09-12 20:46:43Z

2

I did managed to solve this issue by uninstalling the,

ES7+ React/Redux/React-Native snippets extension

answered Sep 12, 2023 at 20:46

Luillyfe

6,9828 gold badges39 silver badges51 bronze badges

Comments

engr.waqas · Accepted Answer · 2022-08-18 18:19:00Z

1

for any one it may help, I just restarted VS code. Credit: https://exerror.com/cannot-use-jsx-unless-the-jsx-flag-is-provided/

answered Aug 18, 2022 at 18:19

engr.waqas

3834 silver badges13 bronze badges

Comments

Patricio Bedregal · Accepted Answer · 2021-02-04 21:30:09Z

0

If you are using VS Code and marksfrancis' answer didn't work for you. Maybe you should check your extensions for TypeScript, in my case the extension 'TypeScript God' was the cause I was still having this issue.

answered Feb 4, 2021 at 21:30

Patricio Bedregal

191 silver badge5 bronze badges

Comments

KalikDev · Accepted Answer · 2021-03-22 08:41:34Z

0

Installing JavaScript and TypeScript Nightly extension and reselecting TS version in VSC (when .tsx is opened, click on TS version (right bottom), then "Select TypeScript version" -> "Use VS Code's Version") also works.

(src: https://code.visualstudio.com/docs/typescript/typescript-compiling#_using-typescript-nightly-builds )

answered Mar 22, 2021 at 8:41

KalikDev

1115 bronze badges

Comments

Andres Alcocer · Accepted Answer · 2021-04-15 03:29:46Z

-1

If you tried updating the typescript version by selecting "Use Workspace Version" in your vscode editor and it still shows the error, try updating the value of the field "jsx" in your .tsconfig file to "preserve".

This will enable you to write JSX the old way.

import React from 'react';

function App() {
  return <h1>Hello World</h1>;
}

If you use the value "react-jsx" value, you will have to write react in the new React 17 Transform:

import { jsx as _jsx } from "react/jsx-runtime";
export const helloWorld = () => _jsx("h1", { children: "Hello world" }, void 0);

.tsconfig file reference (per typescript docs): here

new JSX Transform (per react docs): here

answered Apr 15, 2021 at 3:29

Andres Alcocer

12 bronze badges

Collectives™ on Stack Overflow

Problem with Visual Studio Code using "react-jsx" as jsx value with create-react-app

10 Answers 10

6 Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

6 Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related