Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Cannot use JSX unless the '--jsx' flag is provided when "jsx" is "react-jsx"

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?

like image 755
FelHa Avatar asked Nov 23 '20 08:11

FelHa


People also ask

What is JSX in react?

JSX stands for JavaScript XML. JSX allows us to write HTML in React. JSX makes it easier to write and add HTML in React.

Can JSX be used without react?

Even though JSX had been around before React, it wouldn't have been nearly as popular without React picking it up. However, we can actually use JSX without React, and it's not that difficult either. The way React works is by configuring your bundler to convert JSX into calls to a createElement function.

Could not find a declaration file for module react JSX runtime?

When you have this error, it is usually because you installed a library and you didn't install the types of that library. To fix this error, you need to install @types/library-name using your package manager (npm or yarn).


Video Answer


2 Answers

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"

like image 144
FelHa Avatar answered Dec 04 '22 07:12

FelHa


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"
]
like image 29
Gabriel Petersson Avatar answered Dec 04 '22 07:12

Gabriel Petersson