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

时间：2018-05-20 07:17:29

标签： reactjs typescript jsx tsx

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

27 个答案:

答案 0 :(得分：281)

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

答案 1 :(得分：30)

  

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

重新启动IDE。有时tsconfig.json更改不会立即被选中

答案 2 :(得分：28)

对于任何阅读者，请转到tsconfig.json并将该行从useEffect()更改为state：

<ExampleModal />

奖金：尝试在vscode CMD + SHIFT + P中将IDE TS版本设置为最新版本（atm 4.2），然后从那里进行更改。

答案 3 :(得分：23)

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

答案 4 :(得分：13)

如果使用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版本”。

enter image description here

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

enter image description here

答案 5 :(得分：9)

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

我从Typescript's React Page向tsconfig.json添加了

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

...然后点击save，VSCode从那里接了它。

答案 6 :(得分：8)

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

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

  1. 按： Ctrl + Shift + P
  2. 输入：打字稿：选择打字稿版本...
  3. 选择：使用工作区版本。

答案 7 :(得分：4)

Sublime Text 的解决方案：

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

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

答案 8 :(得分：3)

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

  1. 在 tsconfig.json 中，有这部分
"include": [
    "./src/**/*.ts"
]
  1. 在 C:\Program Files (x86)\Microsoft SDKs\TypeScript
    中更新 Typescript sdk 我有 4.0 版。我需要通过
    1. 删除 Typescript 文件夹
    2. 在 Visual Studio 2019 中，“扩展”>“管理扩展”，安装 Typescript 4.1 for Visual Studio

答案 9 :(得分：3)

我的情况下，所有解决方案均无效，因此我查看了ECMA Scrypt的版本。我的版本是ec5，您可以在此处-> tsconfig.json进行检查。因此，我尝试将target: "es5" 切换为target: "es2017"，这似乎可以解决该问题，并且再次出现任何问题，我将编辑此注释

答案 10 :(得分：3)

要为以后的所有项目解决此问题，可以为VSCode安装gcc - v扩展名。

答案 11 :(得分：2)

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

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

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

要摆脱编辑器中的错误，您可以将其放入“用户设置”：

boundingBox

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

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

答案 12 :(得分：2)

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

问题出在这个 TypeScript God 扩展上。一旦它被禁用，随后被移除，问题就解决了。

当心假神！

答案 13 :(得分：1)

运行纱线启动后出现的以下错误：

> 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 [选项] =值;

然后将239行更改为

否则（parsedCompilerOptions [选项]！== valueToCheck &&选项！==“ jsx”）

现在更改此goto tsconfig.json

，然后将“ jsx”：“ react-jsx” 替换为“ jsx”：“ react”

现在使用 sudo yarn start

运行您的项目

这对我有用，希望这对您也有用：）

答案 14 :(得分：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": ["./"]
}

答案 15 :(得分：1)

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

答案 16 :(得分：1)

即使在运行npx tsc --jsx preserve时也遇到此错误，所以明确指定了--jsx。

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

答案 17 :(得分：1)

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

答案 18 :(得分：1)

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

答案 19 :(得分：0)

我遵循了https://github.com/facebook/create-react-app/issues/10144#issuecomment-733278351

中提到的“简单解决方案”

“” ...将package.json中的TS版本更新为4.1.2“

，然后重新启动VS Code。

仅使用命令面板重新启动TS服务器对我而言不是这样做。

我不需要任何其他步骤。

答案 20 :(得分：0)

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

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

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

答案 21 :(得分：0)

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

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

答案 22 :(得分：0)

在我的情况下重新启动我的IDE是修复。重新启动后弹出一个消息框，并显示我没有安装任何打字稿，您是否要安装TypeScript 3.3？ 我安装了它，现在可以正常使用了。See here for output window

答案 23 :(得分：0)

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

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

下一个错误对我来说是新的，但这是有一定道理的，因此我将--jsx标志添加到tsc并尝试使用tsc --jsx helloWorld.tsx，但是好像我错过了--jsx的参数。 / p>

  

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错误。

答案 24 :(得分：0)

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

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

也许可以跳过第一步，但我没有调查这个。

答案 25 :(得分：0)

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

答案 26 :(得分：-1)

您可以在项目的根目录下创建一个 .vscode/settings.json 文件。在其中输入 { "typescript.tsdk": "node_modules\\typescript\\lib" } 你很高兴。

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

image showing code on vscode

相关问题
最新问题