为什么配置了Babel的@babel/preset-react后JSX还是无法转换？

FSD-倩云提问于 2026-02-05 06:23:27 阅读 42

工具

我在React项目里用Babel处理JSX，已经安装了@babel/preset-react并配置到.babelrc里了，但打包后浏览器还是报错”Uncaught SyntaxError: Unexpected token”。

代码示例：


// App.js
function App() {
  return (
    <div>
      <h1>Hello Babel</h1>
    </div>
  );
}
export default App;

尝试过删除node_modules重装，检查webpack的rule是否包含.js结尾，但问题依旧。难道需要额外配置babel-loader的options？

我来解答赞 3 收藏

反馈

2 条解答

树衡 Lv1

检查一下webpack配置里babel-loader有没有正确设置presets选项，你的.babelrc配置可能没被读取到。试试在loader里加上presets: ['@babel/preset-react']显式声明。

2026-02-06 23:00

迷人的弯弯 Lv1

这个问题我也踩过坑。你可能漏了装 babel-loader 或者没正确配置它。

在WP里面处理JSX，光有 @babel/preset-react 不行，你还得确认两点：

第一，装了 babel-loader 没？没装的话得补上：

npm install --save-dev babel-loader

第二，在webpack.config.js里配对loader了吗？要这样写：

{

  test: /.jsx?$/,

  loader: 'babel-loader',

  options: {

    presets: ['@babel/preset-react']

  }

}

顺便检查下文件扩展名是不是.jsx结尾的？如果不是的话记得改test的正则，或者改文件名。

还有一点容易忽略，就是你的React项目可能用的是默认的babel配置文件名不对。确认下是不是写了.babelrc.js或者babel.config.js？推荐用 babel.config.js 这个，内容可以简化成：

module.exports = {

  presets: ['@babel/preset-react']

};

别小看这几个步骤，少一个都得跪着跑。我以前也是折腾半天，最后发现是loader的options没传对参数。

2026-02-05 08:02