除非提供'--jsx'标志,否则无法使用JSX


154

我四处寻找解决这个问题的方法。所有这些都建议添加"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预设的所有代码。如果你们需要更多文件来帮助调试,请告诉我。


目前还不清楚是什么问题。babel 7使用env,react和typescript预设编译所有代码-为什么同时存在Babel和TS,它们又有何关系?我仍然收到错误-哪个错误“ jsx”:“ react” -注意:标识符React是硬编码的,因此您必须使React带有大写字母R
Estus Flask

Answers:


226

除非提供'--jsx'标志,否则无法使用JSX

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


2
我在VS Code中遇到了同样的问题,但是重新启动确实对我有帮助,谢谢!
Akhmedzianov Danilian

2
重新启动VS Code后问题消失了
NrN

29
错误仍然存​​在于我的机器上。看起来"jsx": "react-jsx"不是有效值。我收到以下错误,Argument for '--jsx' option must be : 'preserve', 'react-native', 'react'.create-react-app将其设置为"react-jsx"。我该怎么办?
Amirhosein Al

2
你也可以告诉VS代码通过添加typescript.tsdk工作区设置指向tsserver.js文件的目录在特定的工作区使用打字稿的特定版本: "typescript.tsdk": "./node_modules/typescript/lib" code.visualstudio.com/docs/typescript/...
panteo

2
更改版本就可以了!请看下面的答案:)
AdamKniec

315

每次运行时npm start,它都会覆盖我配置的所有内容{jsx: ...}react-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使用较旧版本的打字稿(4.0.3),而项目随附的打字稿版本为(4.1.2)。

以下对我有用:

  1. 进入命令面板CTRL+ Shift+ P
  2. 选择“ TypeScript:选择TypeScript版本...”。
  3. 选择“使用工作空间版本”。

VSCode status bar

VSCode command palette

TypeScript workspace version


3
谢谢,对我有用。除非您使用任何.tsx文件,否则不会显示此选项。
awran5 '20

6
鉴于有大量读者使用VSCode,因此该文档应该在create-react-app的官方文档中。感谢您分享sharing
Mauricio Klein

4
是的,如果您的应用程序不在工作区的顶级文件夹中,则可以按照code.visualstudio.com/docs/typescript/…中
nachtigall,

1
我什至没有选择将打字稿版本更改为工作区版本的选项。即使安装了4.1.2,我也只能获得4.0.3的VS Code版本。
Sapper6fd

37

对于任何阅读者,请转到tsconfig.json并将该行从更改react-jsxreact

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

奖励:尝试在vscode CMD + SHIFT + P中将IDE TS版本设置为最新版本(atm 4.2),然后从那里进行更改。


3
争取奖金
trigras

30

create-react-app 开箱即用 AS OF 2020 DECEMBER

在tsconfig内部,include仅设置为/src,更改为:

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

react-create-app的创建者也在以下方面建议了这种组合package.json

 "react-scripts": "^4.0.1",
 "typescript": "^4.1.2"

并做cmd + shift + p-> select typescript version->Use Workspace Version 4.1.2


它为我工作。带有TS 4.0.3的VSC
Damian

是的,我也有相同的设置
加布里埃尔·彼得森

是的,这就是问题所在
Dilip Agheda

3
我什至没有选择将打字稿版本更改为工作区版本的选项。即使安装了4.1.2,我也只能获得4.0.3的VS Code版本。
Sapper6fd

@ Sapper6fd,是的。react-create-app的创建者谈到了vscode打字稿和项目打字稿的不匹配,可能需要单独更新vscode /它的打字稿吗?
加布里埃尔·彼得森

13

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

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

或从视觉上来说,只需向下转到蓝色任务栏并选择Typescript版本(可能是4.xx),然后选择“ Select TypeScript Version”。

在此处输入图片说明

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

在此处输入图片说明


最好的解决方案-更改您的IDE设置,而不更改您的应用程序!+1
aaki

10

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

tsconfig.jsonTypescript的React页面添加到:

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

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


8

该答案与VS Code有关,并且该特定错误在该IDE中仍然存在。(有人可能会觉得有用)

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

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

要消除编辑器中的错误,可以将其放在“用户设置”中:

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

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

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


4

在我的情况下,重新启动我的IDE是修复程序。重新启动后弹出一个消息框,并显示我没有安装任何打字稿,您是否要安装TypeScript 3.3?我安装了它,现在它可以正常工作了。看到这里输出窗口


4

即使在运行时我也收到此错误,npx tsc --jsx preserve所以--jsx绝对是指定的。

在我的情况下,这是由incremental: truetsconfig引起的。显然,在增量模式下,tsc可能会忽略该--jsx设置,而改用以前版本的信息(--jsx仍处于禁用状态)。作为一种解决方案,我暂时使用了增量编译,重新编译并重新启用了它。可能删除构建工件也可能有效。


那是我的情况。您的回答有所帮助
谢尔盖·梅尔

3

要解决所有未来项目的问题,可以安装JavaScript and TypeScript NightlyVSCode扩展。


3

就我而言,所有解​​决方案都无法正常工作,因此我查看了ECMA Scrypt的版本。我的版本是ec5,您可以在此处-> tsconfig.json进行检查。于是,我就切换target: "es5" target: "es2017"一个似乎来处理这个问题,任何事情再度出现,我会编辑这条评论


2

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

为了确定是否存在相同的问题,请在您的IDE(我正在使用VS Code)中加载一个在编辑器中出现错误的文件,然后调出“命令面板”并输入“ TypeScript:转到项目配置”。如果打开jsconfig.json,则删除该文件并重新启动IDE。如果它这次打开tsconfig.json文件,则说明您很高兴。


1

该链接有助于解决此问题: 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提供了两个选项,即保留​​还是响应。

保留将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错误。


1

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

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

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

1

重新启动IDE没有帮助。重新启动TypeScript服务器确实可以解决该问题。


1

运行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行更改为

否则,如果(parsedCompilerOptions [选项]!== valueToCheck &&选项!==“ jsx”)

现在更改此goto tsconfig.json

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

现在使用sudo yarn start运行您的项目

它对我有用,希望这对您也有用:)


1

就我而言,以上都不起作用。我的问题是tsconfig.json的位置不是项目根目录。这样开玩笑就无法读取.jsx文件。我将符号tsconfig.json链接到项目根目录就解决了。可能会有更好的解决方案。让我知道你是否有一个。


1

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


0

就我而言,重新启动VSCode并将Typescript和Run-Script升级到匹配版本是不够的。删除.eslintcache文件后进行重建最终解决了该错误。


0

崇高文字的解决方案:

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

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

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.