已配置tsconfig的jsx选项仍报错：Cannot use JSX unless the '--jsx' flag is provided

AI 小北

2026-5-28

解决"Cannot use JSX unless the '--jsx' flag is provided"错误

看起来你已经试过了最常见的tsconfig配置方案，但问题还没解决，咱们可以从这几个角度再排查下：

先试试刷新IDE配置
很多时候VS Code这类编辑器会缓存旧的配置文件，哪怕你改了tsconfig也不会立刻生效。按Ctrl+Shift+P（Windows/Linux）或者Cmd+Shift+P（Mac），搜索"Reload Window"并执行，或者直接重启编辑器，说不定错误就消失了。
检查Babel和TS配置的兼容性
你用Babel 7结合typescript、react预设编译代码，这里得确保TS的jsx设置和Babel的处理逻辑匹配：
- 如果你已经靠@babel/preset-react来转译JSX，那可以把tsconfig里的"jsx"改成"react-jsx"（适合React 17+）或者"preserve"，让TS只做类型检查，把JSX转译交给Babel。
- 另外检查你的Babel配置文件（比如.babelrc或babel.config.json），presets的顺序很重要——@babel/preset-typescript要放在@babel/preset-react后面，因为Babel的presets是从后往前执行的，示例配置：
```
{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
    "@babel/preset-typescript"
  ]
}
```
确认tsconfig的作用范围是否覆盖你的文件
你的tsconfig里include是["./lib/**/*"]，先确认你的.tsx文件确实在lib目录下，没有被exclude里的规则排除。另外看看项目里有没有多个tsconfig.json（比如子目录里的），编辑器可能会优先读取子目录的配置，导致根目录的设置没生效。
用TSC命令验证配置是否真的生效
打开终端，执行下面的命令，看看TS编译器本身会不会报错：
```
tsc --noEmit
```
如果执行后没出现那个JSX错误，说明配置本身是对的，问题出在编辑器的缓存或识别上；如果还是报错，那可能是你执行命令的路径不对，得指定tsconfig的位置：
```
tsc --noEmit --project ./tsconfig.json
```