配置了@babel/preset-react为什么还是报JSX语法错误?

令狐瑞芳 阅读 15

刚在React项目里用Babel转译JSX,虽然装了@babel/preset-react,但编译时还是报Unexpected token错误。我的.babelrc配置是这样的:


{
  "presets": ["@babel/preset-env"]
}

尝试过把preset-react加到presets数组里,但打包工具依然识别不了JSX语法。是不是版本不兼容?或者还有其他配置没注意到?

我来解答 赞 3 收藏
二维码
手机扫码查看
1 条解答
俊俊 ☘︎
JSX报错大概率是Babel没正确处理React语法。既然你已经装了@babel/preset-react,那问题应该出在配置没生效。你当前的.babelrc只用了preset-env,没包含preset-react,需要改成这样:

{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}

光装包不加到presets里等于没装。另外检查一下package.json有没有正确依赖,版本不冲突的话一般能解决。如果还报错,可能是构建工具配置漏了Babel loader,React项目得确保webpack或vite这类工具也正确指向Babel配置。
点赞 6
2026-02-07 13:13