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

Question

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

Answer 1

我每次运行npm start，它会覆盖不管我配置{jsx: ...}与react-jsx在为了兼容JSX变换阵营17。

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 （或Mac 上的?+ Shift+ P）。
2. 选择“打字稿：选择打字稿版本...”。
3. 选择“使用工作区版本”。

Answer 2

For whoever reading, go to the tsconfig.json and change that line from react-jsx to react:

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

bonus: try also setting the IDE TS version to the latest (atm 4.2), in vscode CMD + SHIFT + P and change it from there.

Answer 3

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

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

Answer 4

create-react-app 开箱即用。 AS OF 2021 MAY

在 tsconfig 里面，include只设置为/src，改为：

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

Answer 5

添加"jsx": "react"到 jsconfig.json 对我来说不起作用，但 "jsx": "preserve"确实如此：

jsconfig.json / tsconfig.json：

{
  "compilerOptions": {
    "jsx": "preserve"
  }
}

Answer 6

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

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

或者在视觉上，只需转到蓝色任务栏并选择 Typescript 版本（可能是 4.xx 版本），然后选择“选择 TypeScript 版本”。

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

Answer 7

重新启动 IDE 似乎太残酷了，而且并不总是有效。您想重新启动 TS 服务器：

注意：仅当您的 IDE 打开任何 TS 相关文件时才会显示该选项

Answer 8

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

我添加了tsconfig.json来自Typescript 的 React Page：

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

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

Answer 9

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

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

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

Answer 10

在将我的 React 应用程序迁移到使用 TypeScript 时，我遇到了同样的错误。我通过添加到我的 jsx 编译器选项来解决这个问题tsconfig.json，其值为react-jsx：

{
  "compilerOptions": {
    ...
    "jsx": "react-jsx"
  }
}

上面的一个流行答案建议改用该react值，这也解决了错误：

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

但我看到各种 消息来源 似乎表明该react-jsx选项更可取，因此认为该方法也值得一提。

不知道为什么这些选项最初都没有包含在使用 tsc init选项tsconfig.json时生成的中：

npx tsc --init

Answer 11

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

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

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

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

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

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

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

Answer 12

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

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

Answer 13

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

1. 在 tsconfig.json 中，有这部分

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

2. 更新 Typescript sdk，C:\Program Files (x86)\Microsoft SDKs\TypeScript
   我的版本是 4.0。我需要将其更新到 4.1（更清楚地说，4.1.2）
   1. 删除 Typescript 文件夹
   2. 在 Visual Studio 2019 中，扩展 > 管理扩展，安装Typescript 4.1 for Visual Studio