Home > Software design >  compilerOptions.jsx must be preserve (JSX is compiled by Babel)
compilerOptions.jsx must be preserve (JSX is compiled by Babel)

Time:12-16

My code Was working fine until I upgrade my vscode to 1.7.4 (Typescript 4.9.3)

then it started changing the tsconfig file,

the tsconfig file's jsx option was 'react-jsx'.

"jsx": "react-jsx"

it automatically changes to 'preserve' when npm starts.

now I can't properly run the project, errors in every step.

I have tried looking up solutions but I couldn't find any related answers.

  • I have deleted the node_module folder and re-install packages with npm i,

  • project version typescript is the same as the vscode typescript.

I want the project to work as same as before,

How do I solve this?

here are my package.json file and tsconfig.json file

package.json file

{
  "name": "...",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "@mantine/core": "^5.8.4",
    "@mantine/dates": "^5.8.4",
    "@mantine/dropzone": "^5.8.4",
    "@mantine/form": "^5.8.4",
    "@mantine/hooks": "^5.8.4",
    "@mantine/modals": "^5.8.4",
    "@mantine/notifications": "^5.8.4",
    "@mantine/nprogress": "^5.8.4",
    "@mantine/spotlight": "^5.8.4",
    "@mantine/tiptap": "^5.8.4",
    "@mui/lab": "^5.0.0-alpha.111",
    "@reduxjs/toolkit": "^1.9.1",
    "@tabler/icons": "^1.114.0",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@tiptap/extension-link": "^2.0.0-beta.204",
    "@tiptap/react": "^2.0.0-beta.204",
    "@tiptap/starter-kit": "^2.0.0-beta.204",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.3",
    "@types/react": "^18.0.25",
    "@types/react-dom": "^18.0.9",
    "axios": "^1.2.0",
    "dayjs": "^1.11.6",
    "lodash-es": "^4.17.21",
    "react": "^18.2.0",
    "react-d3-tree": "^3.3.6",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.40.0",
    "react-router-dom": "^6.4.4",
    "react-scripts": "^2.1.3",
    "save": "^2.9.0",
    "typescript": "^4.9.3",
    "web-vitals": "^2.1.4",
    "yup": "^0.32.11"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "tailwindcss": "^3.2.4"
  }
}

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

CodePudding user response:

I found the answer from the comment.

Upgrade react-scripts to the latest!

  • Related