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

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


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

VSCode status bar

VSCode command palette

TypeScript workspace version


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

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


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.