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

Question

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.

Answer 1

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