除非提供“--jsx”标志，否则不能使用 JSX

Question

我四处寻找解决这个问题的方法。他们都建议将 "jsx": "react" 添加到您的 tsconfig.json 文件中。我已经做到了。另一个是添加 "include: []"，我也这样做了。但是，当我尝试编辑 .tsx 文件时，我仍然遇到错误。下面是我的 tsconfig 文件。

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "allowJs": true,
        "checkJs": false,
        "jsx": "react",
        "outDir": "./build",
        "rootDir": "./lib",
        "removeComments": true,
        "noEmit": true,
        "pretty": true,
        "skipLibCheck": true,
        "strict": true,
        "moduleResolution": "node",
        "esModuleInterop": true
    },
    "include": [
        "./lib/**/*"
    ],
    "exclude": [
        "node_modules"
    ]
}

任何建议都会有所帮助。我正在使用 babel 7 编译带有 env、react 和 typescript 预设的所有代码。如果你们需要更多文件来帮助调试，请告诉我。

Answer 1

Cannot use JSX unless the '--jsx' flag is provided

重新启动您的 IDE。有时 tsconfig.json 更改不会立即生效

Answer 2

这个答案是关于 VS 代码的，这个特定的错误一直存在于 IDE。（有人可能会觉得这很有用）

如果您使用的是 Webpack 之类的工具或其他类似工具，即使您的 tsconfig 将 jsx 的编译器选项设置为 React，您仍然可能会收到此错误。

有解决办法。问题是 VS Code 内置了 tsc 的自动检测。

要消除编辑器中的错误，您可以将其放入用户设置中：

{
    "typescript.tsc.autoDetect": "off"
}

请注意，您将不再获得 tsc 自动检测，但如果您主要使用 Webpack 等工具或使用标志自行处理命令，那么这没什么大不了的。

注意：仅当错误在 VS Code 中持续存在时才执行此操作。为确保此行为持续存在，请重新加载 windows 并在配置 tsconfig.json 文件后重新启动编辑器。

Answer 3

此 link 有助于解决此问题： https://staxmanade.com/2015/08/playing-with-typescript-and-jsx/

请参阅以下部分：修复错误 TS17004：除非提供“--jsx”标志，否则无法使用 JSX。

下一个错误对我来说是新的，但它有一定的道理，所以我将 --jsx 标志添加到 tsc 并尝试 tsc --jsx helloWorld.tsx，但看起来我错过了一个参数 - -jsx.

tsc --jsx helloWorld.tsx message TS6081: Argument for '--jsx' must be 'preserve' or 'react'. In the current iteration of TypeScript 1.6 appears to have two options for --jsx, both preserve or react.

preserve 将在输出中保留 jsx。我想这是为了让你可以使用像 JSX 这样的工具来实际提供翻译。 React 将删除 jsx 语法并将其转换为纯 javascript 因此在 TSX 文件中将变为 React.createElement("div", null)。通过传递反应选项，这里是我们结束的地方：

tsc --jsx react helloWorld.tsx helloWorld.tsx(11,14): error TS2607: JSX element class does not support attributes because it does not have a 'props' property helloWorld.tsx(11,44): error TS2304: Cannot find name 'mountNode'. I'm going to tackle the last error next, as initially I didn't understand the JSX error above.

Answer 4

Restarting my IDE 我的情况是 fix.After 重新启动弹出一个消息框，它显示我没有安装任何打字稿，你想安装 TypeScript 3.3 吗？我安装了它，现在它运行良好。See here for output window

Answer 5

我遇到了同样的错误，只是想出了解决方法。问题是有一个 jsconfig.json 文件导致 TypeScript 编译器忽略 tsconfig.json 文件。

要确定您是否有同样的问题，请在您的 IDE（我使用的是 VS Code）中，在您的编辑器中加载一个有错误的文件，然后调出命令面板并输入 "TypeScript: Go to Project Configuration"。如果它打开 jsconfig.json，则删除该文件并重新启动您的 IDE。如果这次它打开 tsconfig.json 文件，你就成功了。

Answer 6

就我而言，我尝试了所有 tsconfig.json、项目属性对话框、重新启动 IDE、检查安装的 TypeScript 版本等，但仍然出现此错误。来找出使项目向项目文件添加条件属性的开发人员，例如 TypeScriptJSXEmit 未在所有配置中定义（这混淆了项目属性对话框）。

以下是我的项目文件中显示问题的摘录：

...
  <PropertyGroup Condition="'$(Configuration)' == 'QA'">
    <TypeScriptTarget>ES5</TypeScriptTarget>
    <TypeScriptJSXEmit>React</TypeScriptJSXEmit>
...

Answer 7

即使在运行 npx tsc --jsx preserve 时我也会收到此错误，所以肯定指定了 --jsx。

在我的例子中，这是由于在 tsconfig.xml 中有 incremental: true 引起的。显然在增量模式下 tsc 可能会忽略 --jsx 设置，而是使用以前构建的信息（其中 --jsx 仍然被禁用）。作为解决方案，我暂时关闭了增量编译，重新编译并重新启用它。可能删除构建工件也可能有效。

Answer 8

在我的例子中，问题是 VSCode 生成了一个空的 tsconfig.json 文件，当然，它什么也没做。

我从 Typescript's React Page 添加到 tsconfig.json：

{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "commonjs",
        "target": "es6",
        "jsx": "react"
    }
}

...然后点击 save 然后 VSCode 从那里拿走了它。

Answer 9

重新启动我的 IDE 没有帮助。重新启动 TypeScript 服务器确实解决了这个问题。

Answer 10

就我而言，上述 none 确实有效。我的问题是 tsconfig.json 的位置不是项目根目录。所以那个笑话无法读取 .jsx 文件。我解决了它只是符号链接 tsconfig.json 到项目根目录。可能有更好的解决方案。如果你有的话请告诉我。

Answer 11

我不得不将我的整个应用程序添加到 include。

所以我的 tsconfig.json 看起来像这样：

{
    "compilerOptions": {
    "module": "commonjs",
    "declaration": true,
    "removeComments": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "target": "es6",
    "sourceMap": true,
    "outDir": "./dist",
    "baseUrl": "./",
    "incremental": true,
    "jsx": "react",
    "allowJs": true
  },
  "include": ["./"]
}

Answer 12

对于任何正在阅读的人，请转到 tsconfig.json 并将该行从 react-jsx 更改为 react:

{
  "compilerOptions": {
    "jsx": "react"
  }
}

奖励：尝试将 IDE TS 版本设置为最新版本 (atm 4.2)，在 vscode CMD + SHIFT + P 中进行更改。

Answer 13

在运行ning yarn start:

之后出现以下错误

> multi-step-form-typescript@0.1.0 start /home/ehsan/Documents/GitHub/multi-step-form-typescript
> react-scripts start

/home/ehsan/Documents/GitHub/multi-step-form-typescript/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:239
      appTsConfig.compilerOptions[option] = value;
                                          ^

TypeError: Cannot assign to read only property 'jsx' of object '#<Object>'
    at verifyTypeScriptSetup (/home/ehsan/Documents/GitHub/multi-step-form-typescript/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:239:43)
    at Object.<anonymous> (/home/ehsan/Documents/GitHub/multi-step-form-typescript/node_modules/react-scripts/scripts/start.js:31:1)
    at Module._compile (internal/modules/cjs/loader.js:1137:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
    at Module.load (internal/modules/cjs/loader.js:985:32)
    at Function.Module._load (internal/modules/cjs/loader.js:878:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
    at internal/main/run_main_module.js:17:47
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! multi-step-form-typescript@0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the multi-step-form-typescript@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/ehsan/.npm/_logs/2020-11-22T18_20_20_546Z-debug.log

那么你需要做什么才能摆脱这个

在您的终端上点击错误 link

/home/ehsan/Documents/GitHub/multi-step-form-typescript/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:239 appTsConfig.compilerOptions[选项] = 值；

然后将239行改成

else if (parsedCompilerOptions[option] !== valueToCheck && option !== "jsx")

现在更改此转到 tsconfig.json

然后将 "jsx": "react-jsx" 替换为 "jsx": "react"

现在运行你的项目 sudo yarn start

它对我有用，希望对你也有用:)

Answer 14

每次我运行 npm start，它都会用 react-jsx 覆盖我在 {jsx: ...} 中配置的任何内容，以便与 React 17 中的 JSX 转换兼容。

The following changes are being made to your tsconfig.json file:
  - compilerOptions.jsx must be react-jsx (to support the new JSX transform in React 17)

问题是 VSCode 使用旧版本的 typescript (4.0.3)，而项目附带的 typescript 版本是 (4.1.2)。

以下对我有用：

转到命令面板CTRL+Shift+P（或⌘+Shift+P 在 Mac).
选择“TypeScript：Select TypeScript 版本...”。
选择“使用工作区版本”。

PS：除非您在任何 .tsx 文件上，否则此选项不会显示（感谢 @awran5 的评论和收获）

Answer 15

create-react-app 开箱即用。 AS OF 2022 MAY

在 tsconfig 内部，include 仅设置为 /src，更改为：

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

Answer 16

如果您在使用 Typescript 运行 create-react-app 之后看到此问题您可以通过将 "typescript.tsdk": "node_modules/typescript/lib" 添加到 .vscode/settings.json.

来解决此问题

对于 IntelliSense，如果您使用 "jsx": "react-jsx"，您需要将工作区切换为使用 TS 4.1+

或者在视觉上，简单地转到蓝色任务栏和 select Typescript 版本（可能 4.x.x 什么的），然后 select “Select TypeScript 版本” .

然后select“使用工作区版本”应该参考node_modules/typescript/lib

Answer 17

要为所有未来项目解决此问题，您可以为 VSCode 安装 JavaScript and TypeScript Nightly 扩展。

Answer 18

我的案例 none 解决方案有效，所以我查看了 ECMA Scrypt 的版本。我的版本是 ec5，你可以在这里查看 -> tsconfig.json。所以我尝试将 target: "es5" 切换为 target: "es2017" 似乎可以解决问题，如果再次出现任何问题，我将编辑此评论

Answer 19

我遵循了此处提到的“更简单的解决方案”https://github.com/facebook/create-react-app/issues/10144#issuecomment-733278351

"...将 package.json 中的 TS 版本更新为 4.1.2"

然后重新启动 VS Code。

简单地使用命令选项板重新启动 TS 服务器并没有为我做。

我不需要任何其他步骤。

Answer 20

就我而言，重新启动 VSCode 并将 typescript 和运行-scripts 升级到匹配版本是不够的。删除.eslintcache文件后重建终于解决了错误。

Answer 21

Sublime Text 的解决方案：

确保你的 package.json 使用 Typescript >= v4.1.2
通过包控制卸载 Sublime Text“Typescript”包
- 在撰写本文时，它捆绑了 Typescript v3.x
在 Sublime Text“Packages”目录中打开一个终端。
- cd "~/Library/Application Support/Sublime Text 3/Packages"
将 Typescript-Sublime-Plugin 存储库克隆到您的 Packages 目录中：
- git clone https://github.com/microsoft/TypeScript-Sublime-Plugin TypeScript
打开用户设置：Sublime Text > Preferences > Settings
添加"typescript_tsdk": "node_modules/typescript/lib"
- 这告诉 Sublime Typescript 插件使用 Typescript 的项目版本而不是它的捆绑版本。
重启 Sublime Text
- 与大多数 Sublime Text 设置不同，此设置需要重新启动才能重新启动 Typescript 服务器。

参考：
https://github.com/microsoft/TypeScript-Sublime-Plugin/issues/538

Answer 22

对于使用 Visual Studio 2019 的用户，您可以通过执行以下所有操作来修复它：

在tsconfig.json中，有这部分

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

更新 C:\Program Files (x86)\Microsoft SDKs\TypeScript
中的 Typescript SDK 我有4.0版。我需要将它更新到 4.1（更清楚地说，4.1.2）
1. 正在删除 Typescript 文件夹
2. 在 Visual Studio 2019 年，扩展 > 管理扩展，安装 Typescript 4.1 for Visual Studio

Answer 23

我刚刚用我的一个萌芽解决了这个问题，他正在重新安装和重新配置每一个该死的东西来修复它。我们尝试了互联网上的所有修复（我什至不得不自己解决这个问题，所以我真的很困惑为什么我们可以为他修复）。

问题原来是这个 TypeScript God 扩展。一旦它被禁用并随后被删除，问题就解决了。

当心伪神！

Answer 24

2021 年 4 月，这个问题仍然存在。我正在使用 react-boilerplate-cra-template 和 React 17.02.

这是 VSCode 的问题，它默认使用其内置的打字稿。您只需要打开一个 .tsx 文件并

按： Ctrl + Shift + P
输入：打字稿：Select打字稿版本...
Select: 使用工作区版本。

Answer 25

这是@basarat 回答的后续，因为他部分解决了我的问题。我遇到的问题是 error TS6046: Argument for '--jsx' option must be: 'preserve', 'react-native', 'react'。我是这样解决的：

重启你的IDE
删除你的tsconfig.json
使用```tsc --init````

重新初始化

也许可以跳过第一步，但我没有对此进行调查。

Answer 26

您可以在项目的根目录下创建一个 .vscode/settings.json 文件。在里面输入 { "typescript.tsdk": "node_modules\typescript\lib" } 就可以了。

问题是 vscode 使用的是旧的 Typescript 版本。

image showing code on vscode

Answer 27

我有一个 monorepo，Webstorm 自动为我选择了旧版本的 TypeScript 作为子包。修复方法是单击页脚中的 TypeScript X.X.X 并选择 Configure TypeScript ... 并选择正确的包，这在 Webstorm 2021.1

中对我有用

Answer 28

正在添加 { “编译器选项”：{ “jsx”：“反应” } } 到 'tsconfig.json' 文件并重新启动编辑器解决了问题。

Answer 29

我的经历

我在 official next guide 之后将一个现有的新创建的 NextJS 应用程序转换为使用 TS，当我到达需要修改 pages/_app.tsx 的部分时。

我按照 VSCode 提示添加 --jsx 标志，这将以下行添加到 next.config.js 文件：

module.exports = {
  reactStrictMode: all,
};

导致另一个错误：

Failed to load next.config.js, see more info here https://nextjs.org/docs/messages/next-config-error
ReferenceError: all is not defined

从 next.config.js 文件中删除行并重新启动 VSCode 并重新运行 yarn dev 或 npm run dev，瞧！它开始工作了！

Answer 30

您可以使用 npm install 注释再次安装 npm 包。它对我有用。

Answer 31

将 "jsx": "react" 添加到 jsconfig.json 对我没用，但 "jsx": "preserve" 对我有用：

jsconfig.json / tsconfig.json:

{
  "compilerOptions": {
    "jsx": "preserve"
  }
}

除非提供“--jsx”标志，否则不能使用 JSX

Cannot use JSX unless the '--jsx' flag is provided

jsx

typescript

reactjs

tsx

Sublime Text 的解决方案：

我的经历