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

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

工具

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

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

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

组件代码如下：

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

Babel

我来解答赞 5 收藏

反馈

2 条解答

程序员芸菡 Lv1

这个错误通常是因为 Babel 没有正确配置或者缺失必要的插件。你已经安装了 @babel/preset-react，这没错，但还需要确保你使用的是最新的 Babel 版本，并且在项目的 package.json 中正确配置了 Babel 的依赖。

首先，检查下你的 package.json 文件，确保你安装了这些依赖：

"devDependencies": {

  "@babel/core": "^最新版本",

  "@babel/preset-env": "^最新版本",

  "@babel/preset-react": "^最新版本",

  "babel-loader": "^最新版本"

}

然后，确认你的 .babelrc 配置文件看起来没问题，不过为了保险起见，可以试试改成这种格式，有时候 JSON 格式更可靠：

{

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

}

别忘了在 webpack 配置或者其他打包工具中设置 babel-loader 来处理 JavaScript 和 JSX 文件。确保你有类似这样的规则：

module: {

  rules: [

    {

      test: /.(js|jsx)$/,

      exclude: /node_modules/,

      use: {

        loader: "babel-loader"

      }

    }

  ]

}

最后，记得清理一下 node_modules 文件夹，然后重新安装依赖：
rm -rf node_modules && npm install

有时候缓存和旧的依赖会搞事，这样能确保所有东西都是最新的。希望这些步骤能帮到你，如果还有问题，可能是其他地方出了小问题，再检查一遍配置吧。

2026-03-24 05:00

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