Babel 转译 React JSX 时报错 Unexpected token，怎么回事？

Dev · 玉杰提问于 2026-03-20 11:29:23 阅读 14

工具

我刚搭了个新项目，用 Babel 处理 React 代码，但一跑构建就报“Unexpected token”错误，指向 JSX 的尖括号。明明装了 @babel/preset-react，也配进去了，咋还不行？

这是我的 .babelrc 配置和一段简单组件：

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

组件代码如下：

const App = () => {
  return <div>Hello World</div>;
};

Babel

我来解答赞 2 收藏

反馈

1 条解答

Mc.鉴恒 Lv1

这个问题挺常见的，基本就那么几个原因：

最可能的情况是你只配了 @babel/preset-react，但忘了配 @babel/preset-env。Babel 7+ 需要这两个配合着用，preset-react 负责转 JSX，preset-env 负责处理其他 JS 语法。

改成这样试试：

{

  "presets": [

    "@babel/preset-env",

    "@babel/preset-react"

  ]

}

如果你是用 webpack 打包，记得检查 babel-loader 的配置，确保 exclude 排除了 node_modules，别把第三方库也转译了。

还有一种可能是依赖没装对，确保装的是 Babel 7 的包（@babel/preset-xxx），别用旧版 babel-preset-react。现在新项目直接用 Vite 或者 Create React App 得了，省心很多，这些脚手架都配好了，不会踩这种坑。

2026-03-20 12:00