当“jsx”为“react-jsx”时，除非提供“--jsx”标志，否则无法使用 JSX

Posted 2023-02-21

【中文标题】当“jsx”为“react-jsx”时，除非提供“--jsx”标志，否则无法使用 JSX

【英文标题】：Cannot use JSX unless the '--jsx' flag is provided when "jsx" is "react-jsx"

【发布时间】：2021-03-05 23:29:03

【问题描述】：

打字稿抛出：

除非提供了“--jsx”标志，否则不能使用 JSX。ts(17004)

将tsconfig.json jsx 更改为react-jsx 后，jsx 工作。 yarn start 再次将 tsconfig.json 更改为 react-jsx。

react-scripts 已更新至 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"
  ]

如何解决这个问题？

【问题讨论】：

这是否回答了您的问题。 ***.com/questions/50432556/…

没有。重启 VSCode 并不能解决这个问题，因为 react-scripts 会将 tsconfig.json jsx 更改为 react-jsx 会导致 typescript 抛出错误。

@FelHa 您可以发布您找到的解决方案作为答案，无需更新问题。

【参考方案1】：

这是由于一个新错误，它是 vscode 和 typescript 之间的不匹配。如果其他解决方案不起作用；我把include: "src"里面的tsconfig.json改成了

"include": [
     "./src/**/*.ts"
]

【参考方案2】：

您可以通过following way 解决此问题：

“Ctrl + Shift + P”或点击右下角的Typescript版本 窗户。 TypeScript：选择 TypeScript 版本使用工作区 版本... 4.1.2"

【讨论】：

注意：这会将 "typescript.tsdk": "node_modules/typescript/lib" 添加到您的settings.json 中。如果您在多个项目中遇到此问题，可以将其添加到您的全局 settings.json