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

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

提问by AJDEV

I have looked around a bit for a solution to this problem. All of them suggest adding "jsx": "react"to your tsconfig.json file. Which I have done. Another one was to add "include: []", which I have also done. However, I am still getting the error when I am trying to edit .tsxfiles. Below is my tsconfig file.

我已经环顾四周以寻找解决此问题的方法。他们都建议添加"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"
    ]
}

Any suggestions would be helpful. I am using babel 7 to compile all the code with the env, react and typescript presets. If you guys need more files to help debug this, let me know.

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

回答by basarat

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

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

Restart your IDE. Sometimes tsconfig.json changes aren't immediately picked up

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

回答by RonniePettyII

This answer is regarding VS Code and this particular error persisting in that IDE. (Someone may find this useful)

此答案与 VS Code 以及该 IDE 中持续存在的特定错误有关。（有人可能会发现这很有用）

If you're using something like Webpack or some other such tooling you may still get this error even if your tsconfig has the compiler option for jsx set to React.

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

There is a solution to this. The problem is VS Code has built in auto detection for tsc.

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

To get rid of the error in the editor you can put this in your User Settings:

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

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

Just note that you will no longer get tsc auto detection but if you're primarily using tooling like Webpack or handling the command yourself with flags then this isn't that big of a deal.

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

Note: Only do this if the error is persisting in VS Code. To ensure this behavior is persisting reload the windows and restart the editor after configuring your tsconfig.json file.

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

回答by FireFly0

Restarting my IDE in my case was the fix.After restarting a message box popped up and it was showing that i don't have any typescript installed, would you like to install TypeScript 3.3? I installed it and now its working perfectly.See here for output window

在我的情况下重新启动我的 IDE 是修复。重新启动后弹出一个消息框，它显示我没有安装任何打字稿，你想安装打字稿 3.3 吗？我安装了它，现在它工作得很好。有关输出窗口，请参见此处

回答by Dave Kanter

In my case the issue was the VSCode generated an empty tsconfig.jsonfile which, of course, did nothing.

就我而言，问题是 VSCode 生成了一个空tsconfig.json文件，当然，它什么也没做。

I added this to tsconfig.jsonfrom Typescript's React Page:

我tsconfig.json从Typescript 的 React Page 中添加了这个：

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

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

...then hit saveand VSCode took it from there. Problem solved.

...然后点击save，VSCode 从那里拿走了它。问题解决了。

回答by bluenote10

I was getting this error even when running npx tsc --jsx preserveso the --jsxwas definitely specified.

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

In my case this was caused by having incremental: truein the tsconfig. Apparently in incremental mode tscmay ignore the --jsxsetting, and use information from previous builds instead (where --jsxwas still disabled). As a solution I turned of incremental compilation temporarily, recompiled, and re-enabled it. Probably deleting the build artifacts might also work.

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

回答by Rosco

I got this same error, and just figured out how to resolve it. The problem was that there was a jsconfig.jsonfile which caused the TypeScript compiler to ignore the tsconfig.jsonfile.

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

To determine if you have the same problem, in your IDE (I'm using VS Code), load a file which has the error in your editor, then bring up the Command Palette and enter "TypeScript: Go to Project Configuration". If it opens up jsconfig.json, then delete that file and restart your IDE. If it opens the tsconfig.jsonfile this time, you are golden.

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

回答by QuickDanger

In my case, I tried all the tsconfig.json, Project Properties dialog, restarting IDE, checking installed TypeScript version, etc, and it still had this error. Come to find out the dev that made the project added conditional properties to the project file, such that TypeScriptJSXEmitis not defined in all configurations (which confused the Project Properties dialog).

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

Here's an excerpt from my project file showing the issue:

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

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

回答by Amit Chaurasia

This link was helpful to resolve this issue: https://staxmanade.com/2015/08/playing-with-typescript-and-jsx/

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

Refer the section: Fixing error TS17004: Cannot use JSX unless the '--jsx' flag is provided.

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

The next error is new to me, but it makes some sense, so I add the --jsx flag to tsc and try tsc --jsx helloWorld.tsx, but looks like I missed a parameter to --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.

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

preserve will keep the jsx in the output. I presume this is so you can use tools like JSX to actually provide the translation. react will remove the jsx syntax and turn it in to plain javascript so in the TSX file would become React.createElement("div", null). By passing the react option, here's where we end up:

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

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.

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

回答by Gunther

Restarting my IDE didn't help. Restarting the TypeScript server did resolve it tho.

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