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

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)

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

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