不能使用JSX，除非'——jsx'提供标志

我已经四处寻找解决这个问题的办法了。它们都建议将"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预设。如果你们需要更多的文件来帮助调试，请告诉我。

319680 次浏览
小开
最佳答案

除非提供了'——JSX '标志，否则不能使用JSX

重新启动IDE。有时tsconfig。Json更改不会立即拾取🌹

小开

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

如果你正在使用Webpack或其他类似的工具，即使你的tsconfig已经将jsx的编译器选项设置为React，你仍然可能会得到这个错误。

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

为了消除编辑器中的错误，你可以把这个放在你的用户设置中:

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

请注意，您将不再得到tsc自动检测，但如果您主要使用Webpack等工具或自己处理带有标记的命令，那么这并不是什么大问题。

注意:只有当错误在VS Code中持续存在时才这样做。要确保这种行为持续存在，在配置tsconfig之后重新加载窗口并重新启动编辑器。json文件。

小开

这个链接有助于解决这个问题: https://staxmanade.com/2015/08/playing-with-typescript-and-jsx/ < / p >

参考章节: 修复错误TS17004:除非提供了'——JSX '标志，否则不能使用JSX

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

tsc——jsx helloWorld.tsx '——jsx'的参数必须是'preserve'或'react'。 在当前的TypeScript 1.6迭代中，——jsx似乎有两个选项，分别是preserve或react

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

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

小开
在我的情况下，重新启动我的IDE是修复。重新启动后，弹出一个消息框，显示我没有安装任何typescript，你想安装typescript 3.3吗? __abc0

小开

我得到了同样的错误，我只是想办法解决它。问题是存在一个jsconfig.json文件，导致TypeScript编译器忽略tsconfig.json文件。

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

小开

在我的情况下，我尝试了所有tsconfig.json，项目属性对话框，重新启动IDE，检查安装的TypeScript版本等，它仍然有这个错误。来找出开发人员，使项目添加条件属性的项目文件，这样TypeScriptJSXEmit没有定义在所有的配置(这混淆了项目属性对话框)。

这是从我的项目文件显示的问题摘录:

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

即使在运行npx tsc --jsx preserve时，我也得到了这个错误，所以--jsx是明确指定的。

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

小开

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

我将它从Typescript的React Page添加到tsconfig.json:

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

.．.然后点击save, VSCode从那里取出它。

<强>编辑: 自从我最初发布这个答案以来，通用tsconfig文件已经变得更加广泛。我已经发布了一个更扩展的版本作为要点，如果你想了解选项

小开

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

小开
在我的情况下，以上都没有工作。 我的问题是tsconfig的位置。Json不是项目根。 所以这个笑话不能读取。jsx文件。 我用符号链接tsconfig解出来了。Json到项目根目录。 也许有更好的解决办法。 如果你有，请告诉我。

小开

我必须把我的整个应用程序添加到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": ["./"]
}
小开

对于正在阅读的读者，请转到tsconfig。将这一行从react-jsx改为react:

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

额外的好处:尝试将IDE TS版本设置为最新的(atm 4.2)，在vscode CMD + SHIFT + P中更改它。

小开

我在运行纱线开始后得到的以下错误:

> 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 /•/文件/ GitHub / multi-step-form-typescript node_modules / react-scripts /脚本/跑龙套/ verifyTypeScriptSetup.js: 239

. appTsConfig.compilerOptions[option] = value

然后把239行改成

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

现在，在将goto更改为tsconfig.json之后

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

现在用Sudo纱头运行你的项目

这是我的工作，希望这对你也有用:)

小开

每次我运行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)。

下面的方法对我很有效:

  1. 转到命令面板CTRL+转变+P(或Mac上的⌘+转变+P)。
  2. 选择“TypeScript:选择一个TypeScript版本…”。
  3. 选择“使用工作区版本”。

VSCode状态栏

VSCode命令面板

TypeScript工作空间版本

PS:这个选项不会显示，除非你在任何。tsx文件(谢谢@awran5的评论和很好的捕捉)

小开

create-react-app被打破了盒子。AS OF 2022 MAY

在tsconfig中，include只被设置为/src，更改为:

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

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

对于智能感知，如果你使用"jsx": "react-jsx"，你需要切换你的工作空间来使用TS 4.1+

或者从视觉上看，只需转到蓝色任务栏并选择Typescript版本(可能是4.x。x一些)，然后选择“选择TypeScript版本”;

enter image description here

然后选择“使用工作区版本”;哪个应该引用node_modules/typescript/lib

enter image description here

小开

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

小开

我的情况下，没有一个解决方案是有效的，所以我看了ECMA Scrypt版本。我的版本是ec5，你可以在这里检查->tsconfig.json。所以我尝试将target: "es5" 转换为target: "es2017"，它似乎可以处理这个问题，如果再次出现任何问题，我将编辑这条注释

小开

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

“…更新包中的TS版本。Json到4.1.2"

然后重新启动VS Code。

简单地用命令面板重新启动TS服务器并不能解决我的问题。

我不需要任何其他步骤。

小开

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

小开

崇高文本的解决方案:

  1. 确保你的包裹。json使用Typescript >= v4.1.2
  2. 卸载Sublime Text "Typescript"通过包控制
    • 在撰写本文时，它捆绑了Typescript v3.x
    3. 在Sublime Text "Packages"中打开一个终端;目录中。
    • cd "~/Library/Application Support/Sublime Text 3/Packages"
    将Typescript-Sublime-Plugin repo复制到Packages目录:
    • git clone https://github.com/microsoft/TypeScript-Sublime-Plugin TypeScript
  3. 打开用户设置:Sublime Text > Preferences > Settings
    4. <李>添加"typescript_tsdk": "node_modules/typescript/lib"
    • 这告诉Sublime Typescript插件使用Typescript的项目版本，而不是它的捆绑版本。
  4. 重启Sublime Text
    • 与大多数Sublime Text设置不同，这个设置需要重新启动Typescript服务器。
< p > 参考:
https://github.com/microsoft/TypeScript-Sublime-Plugin/issues/538 < / p >
小开

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

  1. 在tsconfig。Json，有这部分
"include": [
"./src/**/*.ts"
]
  1. 更新C:\Program Files (x86)\Microsoft SDKs\TypeScript中的Typescript sdk
    我有4.0版本。我需要将它更新到4.1(更清楚地说，是4.1.2)
    1. 删除Typescript文件夹
    2. 在Visual Studio 2019中，Extensions >管理扩展，安装Typescript 4.1 for Visual Studio
小开

我只是和我的一个朋友一起解决了这个问题，他重新安装和配置了所有该死的东西来解决它。我们尝试了互联网上的所有修复(我甚至不得不自己解决这个问题，所以我真的很困惑为什么我们可以为他修复它)。

问题原来是这个打印稿神扩展。一旦它被禁用，随后被删除，问题就解决了。

当心假神!

小开

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

这是一个问题与VSCode，它使用内置的typescript默认。你只需要打开一个。tsx文件

  1. 新闻: Ctrl + Shift + P
  2. 输入: Typescript:选择Typescript版本…
  3. 选择:使用工作区版本。
小开

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

  1. 重新启动你的IDE
  2. 删除 your tsconfig.json
  3. Re-initialise你的tsconfig。使用' ' ' tsc——init````

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

小开

你可以创建一个。vscode/settings。Json文件在你的项目的根。在它中输入{ "typescript.tsdk": "node_modules\\typescript\\lib" }，你就可以开始了。

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

图像显示代码在vscode

小开

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

小开
< p >添加 ｛ “compilerOptions": { “jsx":“react" ｝ ｝ “tsconfig。

. Json文件和重新启动编辑器解决了这个问题
小开

我的经验

我正在转换现有的新创建的NextJS应用程序，使用TS跟随官方下一个指南，当我到达pages/_app. js的部分时。需要修改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，瞧!它开始工作了!

小开

你可以用npm安装注释再次安装npm包。这对我很管用。

小开

将"jsx": "react"添加到jsconfig。json没有为我工作，但 "jsx": "preserve"做:

jsconfig。Json / tsconfig.json:

{
"compilerOptions": {
"jsx": "preserve"
}
}
小开

重新启动IDE似乎太残酷了，而且并不总是有效。你想要重启TS服务器代替:

click settings - command palette .

restart ts server

注意:该选项只会显示当你的IDE有任何TS相关文件打开


提交答案