React+TS项目报Cannot use JSX unless the '--jsx' flag错误如何解决

AI 小北

2026-10-1

问题排查与解决步骤

1. 修复tsconfig.json的include配置
  你当前的include规则仅匹配.ts后缀的文件，完全没有覆盖.tsx后缀的JSX文件，导致TS编译器不会将你的Login.tsx纳入编译范围，也不会读取对应的jsx配置规则。
  调整后的include配置如下：
```
"include": [
  "./src/**/*.ts",
  "./src/**/*.tsx"
]
```
如果你的项目确实存在JS和TS混用的情况，还可以补充匹配.js、.jsx后缀：
```
"include": [
  "./src/**/*.ts",
  "./src/**/*.tsx",
  "./src/**/*.js",
  "./src/**/*.jsx"
]
```
1. 匹配React版本调整jsx配置
- 如果你使用的是React 17及以上版本，请将jsx字段值改为react-jsx，该配置支持新的JSX转换规则，无需手动在每个TSX文件顶部导入React
- 如果你使用的是React 16及以下版本，保持jsx值为react，但必须在所有包含JSX的TSX文件顶部添加导入语句：import React from 'react'，你的Login.tsx中使用了React.useState但未导入React，本身也属于语法错误。
1. 检查依赖完整性
  确保项目已安装必要的类型依赖，执行以下命令安装：
```
npm install @types/react @types/react-dom typescript --save-dev
```
1. 清理缓存重试
  如果调整配置后仍然报错，按以下步骤操作：
2. 关闭编辑器的TypeScript服务（VS Code可按Ctrl+Shift+P/Cmd+Shift+P，选择「TypeScript: Restart TS Server」）
3. 删除项目根目录的node_modules文件夹、package-lock.json或yarn.lock文件
4. 重新执行npm install或yarn install安装依赖
5. 重启项目运行命令
1. 排查配置覆盖问题
  如果你使用的是Vite、Create React App等脚手架，注意检查项目根目录是否存在tsconfig.app.json、tsconfig.node.json等拆分的配置文件，这类文件会覆盖根目录tsconfig.json的规则，需要在对应文件中调整jsx和include配置。