我正在努力解决 VSCode 中的以下“错误”:
Argument for '--jsx' option must be: 'preserve', 'react-native', 'react'
因此,当
jsx
值似乎起作用时,react-scripts (create-react-app) 会自动将 react-jsx
键设置为 react
值。
实际上,代码运行完美并显示了我想要的页面,但 IDE 将所有内容都强调为错误,并表示:
Cannot use JSX unless the '--jsx' flag is provided.
这是我的 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"
]
}
,以及我的 package.json (由 create-react-app 提供的默认包 + 已更新的包):
{
"name": "front-office",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.6",
"@testing-library/react": "^11.2.2",
"@testing-library/user-event": "^12.2.2",
"@types/jest": "^26.0.15",
"@types/node": "^14.14.9",
"@types/react": "^17.0.0",
"@types/react-dom": "^17.0.0",
"bootstrap": "^4.5.3",
"react": "^17.0.1",
"react-bootstrap": "^1.4.0",
"react-dom": "^17.0.1",
"react-scripts": "4.0.1",
"typescript": "^4.1.2",
"web-vitals": "^1.0.1"
},
"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"
]
}
}
我正在使用最新版本的 Typescript,我用
ncu
更新了所有包,关闭/打开 VSCode(有时与 tsconfig 一起工作!),似乎没有什么可以解决这个问题。
我很确定这是一个 VSCode 问题,但我已经不知道如何解决这个问题了。
你们有什么想法吗?
编辑:
如果您按照上述步骤操作,但 VSCode 仍然显示“-jsx”错误,请确保您已禁用“TypeScript God”扩展(以及任何其他 TS 扩展,直到问题不再出现)。
这是因为 VSCode 的 Typescript 版本没有使用 create-react-app 默认使用的最新 babel 功能。
您可以更改 VS Code 以使用工作区的 Typescript 版本,这将解决此问题。
打开 TypeScript 或 JavaScript 文件,然后单击状态栏中的 TypeScript 版本号。将出现一个消息框,询问您应使用哪个版本的 TypeScript VS Code
选择“使用工作区版本”以使用较新的 Create React App typescript 版本。
正如其他人提到的,这是 create-react-app (CRA) 脚本的一个开放问题。但是,上述解决方案都不适合我。对我有用的唯一解决方案是在
.env
文件(在项目根目录中)中添加以下配置。
DISABLE_NEW_JSX_TRANSFORM=true
对于使用 VS 2019 的用户,我必须从这里安装 typescript 4.1 for Visual Studio: https://marketplace.visualstudio.com/items?itemName=TypeScriptTeam.TypeScript-41
然后通过在编译器选项等中使用新的 jsx 设置,它可以正常工作。
我知道这对于大多数人来说是显而易见的,但我总是忘记在 React 中使用
.tsx
文件扩展名,然后我就绞尽脑汁试图理解为什么 JSX 代码会抛出错误。
因此,请确保您使用的是
.tsx
扩展名,而不是 .ts
!
如果您正在使用 VS Code 并且 markfrancis 的答案不适合您。也许你应该检查你的 TypeScript 扩展,就我而言,扩展“TypeScript God”是我仍然遇到此问题的原因。
安装JavaScript 和 TypeScript Nightly 扩展并在 VSC 中重新选择 TS 版本(打开 .tsx 时,单击 TS 版本(右下),然后“选择 TypeScript 版本”->“使用 VS Code 的版本”)也可以。
(来源:https://code.visualstudio.com/docs/typescript/typescript-compiling#_using-typescript-nightly-builds)
我确实通过卸载解决了这个问题,
ES7+ React/Redux/React-Native snippets extension
如果您尝试通过在 vscode 编辑器中选择“使用工作区版本”来更新打字稿版本,但仍然显示错误,请尝试将 .tsconfig 文件中的字段
"jsx"
的值更新为 "preserve"
。
import React from 'react';
function App() {
return <h1>Hello World</h1>;
}
"react-jsx"
值,则必须在新的React 17 Transform中编写react:import { jsx as _jsx } from "react/jsx-runtime";
export const helloWorld = () => _jsx("h1", { children: "Hello world" }, void 0);
.tsconfig 文件参考(每个打字稿文档):这里
新的 JSX 转换(根据 React 文档):这里
对于任何可能有帮助的人,我刚刚重新启动了 VS code。 信用:https://exerror.com/cannot-use-jsx-unless-the-jsx-flag-is-provided/