我环顾四周寻找解决此问题的方法。他们都建议将 "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 预设的代码。如果你们需要更多文件来帮助调试,请告诉我。
每次我运行 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(或 Mac 上的 ⌘+Shift+P)。选择“TypeScript:选择 TypeScript 版本...”。选择“使用工作区版本”。
https://i.stack.imgur.com/Ro3a0.png
https://i.stack.imgur.com/Iwcaw.png
https://i.stack.imgur.com/0oo6Y.png
PS:除非您使用任何 .tsx 文件,否则此选项不会显示(感谢@awran5 的评论和很好的收获)
除非提供了“--jsx”标志,否则不能使用 JSX
重新启动您的 IDE。有时 tsconfig.json 更改不会立即被拾取🌹
"jsx": "react-jsx"
不是有效值。我收到以下错误 Argument for '--jsx' option must be : 'preserve', 'react-native', 'react'.
但 create-react-app
将其设置为 "react-jsx"
。我应该怎么办?
"typescript.tsdk": "./node_modules/typescript/lib"
code.visualstudio.com/docs/typescript/…
对于阅读的人,请转到 tsconfig.json 并将该行从 react-jsx
更改为 react
:
{
"compilerOptions": {
"jsx": "react"
}
}
奖励:尝试在 vscode CMD + SHIFT + P 中将 IDE TS 版本设置为最新(atm 4.2)并从那里进行更改。
yarn start
或 npm start
后,它会返回到“react-jsx”:(
react-jsx
。我陷入了无限循环的错误。
create-react-app
开箱即用。 AS OF 2022 MAY
在 tsconfig 内部,include
仅设置为 /src
,更改为:
"include": [
"./src/**/*.ts"
]
.tsx
也许?
create-react-app
是一个很好的起点)
就我而言,问题在于 VSCode 生成了一个空的 tsconfig.json
文件,当然,它什么也没做。
我将它从 Typescript's React Page 添加到 tsconfig.json
:
{
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"noImplicitAny": true,
"module": "commonjs",
"target": "es6",
"jsx": "react"
}
}
...然后点击 save
,VSCode 从那里拿走了它。
2021 年 4 月,这个问题仍然存在。我将 react-boilerplate-cra-template 与 react 17.02 一起使用。
这是 VSCode 的一个问题,它默认使用其内置的打字稿。您只需要打开一个 .tsx 文件并
按:Ctrl + Shift + P 输入:Typescript:选择 typescript 版本... 选择:使用工作区版本。
如果您在使用 Typescript 运行 create-react-app 后遇到此问题,您可以通过将 "typescript.tsdk": "node_modules/typescript/lib"
添加到 .vscode/settings.json
来解决此问题。
对于 IntelliSense,如果您使用 "jsx": "react-jsx"
,您需要切换工作区以使用 TS 4.1+
或者在视觉上,只需转到蓝色任务栏并选择 Typescript 版本(可能是 4.xx 的东西),然后选择“选择 TypeScript 版本”。
https://i.stack.imgur.com/CS34O.png
然后选择应引用 node_modules/typescript/lib
的“使用工作区版本”
https://i.stack.imgur.com/w6nZ3.png
将 "jsx": "react"
添加到 jsconfig.json 对我不起作用,但 "jsx": "preserve"
可以:
jsconfig.json/tsconfig.json:
{
"compilerOptions": {
"jsx": "preserve"
}
}
这个答案是关于 VS Code 和这个 IDE 中持续存在的特定错误。 (有人可能会觉得这很有用)
如果您使用的是 Webpack 或其他类似工具,即使您的 tsconfig 将 jsx 的编译器选项设置为 React,您仍然可能会收到此错误。
有一个解决方案。问题是 VS Code 为 tsc 内置了自动检测功能。
要消除编辑器中的错误,您可以将其放在用户设置中:
{
"typescript.tsc.autoDetect": "off"
}
请注意,您将不再获得 tsc 自动检测,但如果您主要使用 Webpack 之类的工具或使用标志自己处理命令,那么这没什么大不了的。
注意:仅当错误在 VS Code 中持续存在时才执行此操作。为确保此行为持续存在,请在配置 tsconfig.json 文件后重新加载窗口并重新启动编辑器。
即使在运行 npx tsc --jsx preserve
时我也收到此错误,因此肯定指定了 --jsx
。
在我的情况下,这是由 tsconfig 中的 incremental: true
引起的。显然,在增量模式下 tsc
可能会忽略 --jsx
设置,而是使用以前构建的信息(其中 --jsx
仍然被禁用)。作为一种解决方案,我暂时关闭了增量编译,重新编译并重新启用它。可能删除构建工件也可能有效。
在我的情况下重新启动我的 IDE 是修复。重新启动后弹出一个消息框,它显示我没有安装任何 typescript,你想安装 TypeScript 3.3 吗?我安装了它,现在它运行良好。See here for output window
要为所有未来的项目解决此问题,您可以为 VSCode 安装 JavaScript and TypeScript Nightly
扩展。
我的情况是所有解决方案都不起作用,所以我查看了 ECMA Scrypt 的版本。我的版本是 ec5,你可以在这里查看 -> tsconfig.json。所以我尝试将 target: "es5"
切换到 target: "es2017"
似乎可以解决问题,再次出现任何问题,我将编辑此评论
对于使用 Visual Studio 2019 的用户,您可以通过执行以下所有操作来修复它:
在 tsconfig.json 中,有这部分
"include": [
"./src/**/*.ts"
]
更新 C:\Program Files (x86)\Microsoft SDKs\TypeScript 中的 Typescript sdk 我有 4.0 版。我需要通过删除 Typescript 文件夹将其更新到 4.1(更清楚的是 4.1.2)在 Visual Studio 2019 中,扩展 > 管理扩展,为 Visual Studio 安装 Typescript 4.1
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 repo 克隆到您的 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
"jsx": "react-jsx"
问题时遇到的问题。
%APPDATA%\Sublime Text 3\Packages
目录下运行。找到您的位置的一种简单方法是在 Sublime Text 3 中导航到:Preferences->Browse Packages。
此链接有助于解决此问题: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 react helloWorld.tsx helloWorld.tsx(11,14):错误 TS2607:JSX 元素类不支持属性,因为它没有“props”属性 helloWorld.tsx(11,44):错误 TS2304:不能找到名称“mountNode”。接下来我将解决最后一个错误,因为最初我不理解上面的 JSX 错误。
我得到了同样的错误,只是想出了如何解决它。问题是有一个 jsconfig.json
文件导致 TypeScript 编译器忽略 tsconfig.json
文件。
要确定您是否有同样的问题,在您的 IDE(我使用的是 VS Code)中,在您的编辑器中加载一个有错误的文件,然后调出命令面板并输入“TypeScript:转到项目配置”。如果它打开 jsconfig.json
,则删除该文件并重新启动您的 IDE。如果这次它打开了 tsconfig.json
文件,那么你就很成功了。
重新启动我的 IDE 没有帮助。重新启动 TypeScript 服务器确实解决了它。
我刚刚用我的一个萌芽解决了这个问题,他正在重新安装和重新配置所有该死的东西来解决它。我们尝试了互联网上的所有修复(我什至不得不自己解决这个问题,所以我真的很困惑为什么我们可以为他修复它)。
问题原来是这个 TypeScript God 扩展。一旦它被禁用并随后被删除,问题就解决了。
当心伪神!
我有一个 monorepo,对我来说,Webstorm 自动为子包选择了旧版本的 TypeScript。修复方法是单击页脚中的 TypeScript XXX 并选择 Configure TypeScript ...
并选择正确的包,这在 Webstorm 2021.1 中对我有用
将 { "compilerOptions": { "jsx": "react" } } 添加到 'tsconfig.json' 文件并重新启动编辑器解决了问题。
就我而言,我尝试了所有 tsconfig.json
、项目属性对话框、重新启动 IDE、检查已安装的 TypeScript 版本等,但仍然出现此错误。来找出使项目向项目文件添加条件属性的开发人员,这样 TypeScriptJSXEmit
并未在所有配置中定义(这混淆了“项目属性”对话框)。
这是我的项目文件的摘录,显示了该问题:
...
<PropertyGroup Condition="'$(Configuration)' == 'QA'">
<TypeScriptTarget>ES5</TypeScriptTarget>
<TypeScriptJSXEmit>React</TypeScriptJSXEmit>
...
运行 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 运行你的项目
这对我有用,希望这对你也有用:)
就我而言,以上都没有奏效。我的问题是 tsconfig.json 的位置不是项目根目录。所以这个玩笑无法读取 .jsx 文件。我解决了它只是将 tsconfig.json 符号链接到项目根目录。可能有更好的解决方案。让我知道你有没有。
我遵循此处提到的“更简单的解决方案”https://github.com/facebook/create-react-app/issues/10144#issuecomment-733278351
“...将 package.json 中的 TS 版本更新为 4.1.2”
然后重新启动VS Code。
简单地使用命令选项板重新启动 TS 服务器并没有为我做这件事。
我不需要任何其他步骤。
就我而言,重新启动 VSCode 并将 typescript 和 run-scripts 升级到匹配的版本是不够的。删除 .eslintcache 文件后重建终于解决了错误。
我必须将我的整个应用程序添加到 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": ["./"]
}
我的经验
我正在转换现有的新创建的 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
和瞧!它开始工作了!
这是@basarat 回答的后续行动,因为他部分解决了我的问题。我遇到的问题是error TS6046: Argument for '--jsx' option must be: 'preserve', 'react-native', 'react'
。我解决了如下:
重启你的 IDE 删除你的 tsconfig.json 使用 ```tsc --init`` 重新初始化你的 tsconfig.json
也许可以跳过第一步,但我没有对此进行调查。
您可以在项目的根目录中创建一个 .vscode/settings.json 文件。在其中输入 { "typescript.tsdk": "node_modules\\typescript\\lib" }
即可。
问题是 vscode 使用的是旧的 Typescript 版本。
不定期副业成功案例分享
.tsx
文件上,否则此选项不会显示。react-jsx
改回react
。