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

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

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.

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.

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

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.

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.

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 )

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

just replace

 "jsx": "react-jsx"

to

"jsx": "react"

Cheers !!

I changed Visual Studio code to a newer version which fixed the issue on my end.