11

typescript throws:

Cannot use JSX unless the '--jsx' flag is provided.ts(17004)

After changing tsconfig.json jsx to react-jsx, jsx works. yarn start changes tsconfig.json to react-jsx again.

react-scripts was updated to 4.0.1.

package.json

"dependencies": {
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.1",
    "semantic-ui-css": "^2.4.1",
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.2.2",
    "@testing-library/user-event": "^12.1.10",
    "@types/jest": "^26.0.15",
    "@types/node": "^14.14.9",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@typescript-eslint/eslint-plugin": "^4.8.1",
    "@typescript-eslint/parser": "^4.8.1",
    "eslint-config-react": "^1.1.7",
    "eslint-plugin-react": "^7.21.5",
    "eslint-plugin-react-hooks": "^4.2.0",
    "typescript": "^4.1.2"
  },

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"
  ]
}

How to fix this?

ford04
  • 66,267
  • 20
  • 199
  • 171
FelHa
  • 1,043
  • 11
  • 24
  • Does this answer your question. https://stackoverflow.com/questions/50432556/cannot-use-jsx-unless-the-jsx-flag-is-provided?rq=1 – Dark shadow Nov 23 '20 at 09:06
  • 1
    No. Restarting VSCode does not solve this problem, because react-scripts will change tsconfig.json `jsx` to `react-jsx` which will end in typescript throwing an error. – FelHa Nov 23 '20 at 09:12
  • @FelHa You can post your found solution as answer, no question update needed. – ford04 Nov 30 '20 at 10:40

2 Answers2

14

You can fix this the following way:

"Ctrl + Shift + P" or Click Typescript version at the bottom right of the window. TypeScript: Select TypeScript Version Use Workspace Version... 4.1.2"

FelHa
  • 1,043
  • 11
  • 24
  • Note: this will add `{ "typescript.tsdk": "node_modules/typescript/lib" }` to your settings.json. You can add this to your global `settings.json` if you experience this issue for multiple projects – 0xPingo Dec 19 '20 at 04:04
  • How does changing VSCode settings which should be unrelated to yarn start command from terminal solve the issue? I am just curious here – kiranghule27 Jan 17 '23 at 07:11
2

This is due to a new bug, it's a mismatch between vscode and typescript. If the other solutions won't work; I changed include: "src" inside tsconfig.json to

"include": [
     "./src/**/*.ts"
]
Gabriel Petersson
  • 8,434
  • 4
  • 32
  • 41