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

【问题标题】：Cannot use JSX unless the '--jsx' flag is provided除非提供了“--jsx”标志，否则不能使用 JSX
【发布时间】：2018-10-30 03:34:03
【问题描述】：

我已经四处寻找解决此问题的方法。他们都建议将"jsx": "react" 添加到您的 tsconfig.json 文件中。我已经做到了。另一种是添加"include: []"，我也这样做了。但是，当我尝试编辑.tsxfiles 时，我仍然收到错误消息。下面是我的 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 预设的代码。如果你们需要更多文件来帮助调试，请告诉我。

【问题讨论】：

目前还不清楚是什么问题。 babel 7 用 env、react 和 typescript 预设编译所有代码 - 为什么同时存在 Babel 和 TS 以及它们之间的关系？ 我仍然收到错误 - 哪一个？ “jsx”：“反应” - Note: The identifier React is hard-coded, so you must make React available with an uppercase R

标签： reactjs typescript jsx tsx

【解决方案1】：

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

重新启动您的 IDE。有时 tsconfig.json 更改不会立即被拾取?

【讨论】：

我的机器上仍然存在错误。看起来 "jsx": "react-jsx" 不是有效值。我收到以下错误Argument for '--jsx' option must be : 'preserve', 'react-native', 'react'. 但create-react-app 将其设置为"react-jsx"。我该怎么办？
您还可以通过添加指向 tsserver.js 文件目录的 typescript.tsdk 工作区设置来告诉 VS Code 在特定工作区中使用特定版本的 TypeScript："typescript.tsdk": "./node_modules/typescript/lib" code.visualstudio.com/docs/typescript/…
更改版本成功了！看看下面的答案:)
我更改了 tsconfig.json，它起作用了，{ ..... "jsx": "react" }, "include": [ "src", "/node_modules/**/* " ] }。修改“jsx:react”并添加“node_modules/**/*”。

【解决方案2】：

这个答案是关于 VS Code 和这个 IDE 中持续存在的特定错误。（有人可能会觉得这很有用）

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

有一个解决方案。问题是 VS Code 内置了对 tsc 的自动检测。

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

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

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

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

【讨论】：

【解决方案3】：

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

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

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

tsc --jsx helloWorld.tsx 消息 TS6081：“--jsx”的参数必须是“保留”或“反应”。在当前的 TypeScript 1.6 迭代中， --jsx 似乎有两个选项，保留或反应。

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

tsc --jsx 反应 helloWorld.tsx helloWorld.tsx(11,14)：错误 TS2607：JSX 元素类不支持属性，因为它没有“props”属性 helloWorld.tsx(11,44)：错误 TS2304：找不到名称“mountNode”。接下来我将解决最后一个错误，因为最初我不理解上面的 JSX 错误。

【讨论】：

【解决方案4】：

在我的情况下，重新启动我的 IDE 是解决方法。重新启动后弹出一个消息框，显示我没有安装任何 typescript，你想安装 TypeScript 3.3 吗？我安装了它，现在它可以正常工作了。See here for output window

【讨论】：

【解决方案5】：

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

要确定您是否有同样的问题，在您的 IDE（我使用的是 VS Code）中，在您的编辑器中加载一个有错误的文件，然后打开命令面板并输入“TypeScript：转到项目配置” ”。如果打开 jsconfig.json，则删除该文件并重新启动 IDE。如果这次它打开了tsconfig.json 文件，那你就是金子了。

【讨论】：

【解决方案6】：

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

这是我的项目文件的摘录，显示了该问题：

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

【讨论】：

【解决方案7】：

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

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

【讨论】：

那是我的情况。你的回答有帮助

【解决方案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 从那里获取它。

【讨论】：

【解决方案9】：

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

【讨论】：

【解决方案10】：

在我的情况下，以上都没有奏效。我的问题是 tsconfig.json 的位置不是项目根目录。所以这个玩笑无法读取 .jsx 文件。我解决了它只是将 tsconfig.json 符号链接到项目根目录。可能有更好的解决方案。有的话请告诉我。

【讨论】：

【解决方案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": ["./"]
}

【讨论】：

【解决方案12】：

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

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

奖励：尝试在 vscode CMD + SHIFT + P 中将 IDE TS 版本设置为最新（atm 4.2）并从那里更改。

【讨论】：

不幸的是，在您运行 yarn start 或 npm start 之后，它将返回到“react-jsx”:(
"jsx": 我的 tsconfig 中缺少“react”。添加它并解决了问题。

【解决方案13】：

运行 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

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

在您的终端上点击错误链接

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

然后将239行改为

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

现在更改此 goto tsconfig.json 后

并将 "jsx": "react-jsx" 替换为 "jsx": "react"

现在使用 sudo yarn start

运行您的项目

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

【讨论】：

【解决方案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：选择 TypeScript 版本...”。
选择“使用工作区版本”。

【讨论】：

谢谢，这对我有用。除非您在任何 .tsx 文件上，否则此选项不会显示。
是的，如果您的应用不在工作区的顶级文件夹中，您可以按照code.visualstudio.com/docs/typescript/…中所述配置打字稿目录
我什至没有将打字稿版本更改为工作区版本的选项。我只得到 4.0.3 的 VS Code 版本，即使我安装了 4.1.2。
这对我有用，只需将react-jsx 改回react。

【解决方案15】：

create-react-app 开箱即用。 AS OF 2021 DECEMBER

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

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

【讨论】：

是的，我也有同样的设置
我什至没有将打字稿版本更改为工作区版本的选项。我只得到 4.0.3 的 VS Code 版本，即使我安装了 4.1.2。
@Sapper6fd，是的。 react-create-app 的创建者谈到 vscode typescript 和项目 typescript 不匹配，可能需要单独更新 vscode/its typescript？
这行得通。我差点没投赞成票，因为你有“33”个赞成票，而 33 是个漂亮的数字。
Grymt，tackar ！

【解决方案16】：

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

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

或者在视觉上，只需向下到蓝色任务栏并选择 Typescript 版本（可能是 4.x.x 的东西），然后选择“选择 TypeScript 版本”。

然后选择“Use Workspace Version version”，它应该引用node_modules/typescript/lib

【讨论】：

更可取的解决方案 - 更改您的 IDE 设置而不是更改您的应用程序！ +1

【解决方案17】：

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

【讨论】：

【解决方案18】：

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

【讨论】：

【解决方案19】：

我按照这里提到的“更简单的解决方案”https://github.com/facebook/create-react-app/issues/10144#issuecomment-733278351

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

然后重新启动 VS Code。

简单地用命令面板重启 TS 服务器对我没有用。

我不需要任何其他步骤。

【讨论】：

【解决方案20】：

在我的情况下，重新启动 VSCode 并将 typescript 和 run-scripts 升级到匹配的版本是不够的。删除.eslintcache文件后重新构建终于解决了错误。

【讨论】：

【解决方案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

【讨论】：

这能够解决我在使用 React 17 和使用 "jsx": "react-jsx" 问题时遇到的问题。
Windows 10用户快速说明，根据微软的github README.md，步骤4必须在%APPDATA%\Sublime Text 3\Packages目录下运行。找到你的位置的一种简单方法是在 Sublime Text 3 中导航到：Preferences->Browse Packages。

【解决方案22】：

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

在tsconfig.json中，有这部分

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

更新 C:\Program Files (x86)\Microsoft SDKs\TypeScript 中的 Typescript sdk
我有 4.0 版。我需要通过
1. 删除 Typescript 文件夹
2. 在 Visual Studio 2019 中，扩展 > 管理扩展，安装 Typescript 4.1 for Visual Studio

【讨论】：

【解决方案23】：

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

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

当心伪神！

【讨论】：

链接抛出404
@trainoasis 肯定已经被删除了。

【解决方案24】：

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

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

按下： Ctrl + Shift + P
输入： Typescript：选择 typescript 版本...
选择：使用工作区版本。

【讨论】：

这在恢复到旧版本之前工作了大约 5 秒，但我仍然没有解决方案

【解决方案25】：

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

重新启动您的 IDE
删除您的 tsconfig.json
重新初始化你的 tsconfig.json 使用 ```tsc --init````

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

【讨论】：

【解决方案26】：

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

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

image showing code on vscode

【讨论】：

【解决方案27】：

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

【讨论】：

【解决方案28】：

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

【讨论】：

【解决方案29】：

我的经历

我正在转换现有的新创建的 NextJS 应用程序以使用official next guide 之后的 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 和瞧！它开始工作了！

【讨论】：