React组件打包报错求助：Module build failed: SyntaxError: Unexpected token (9:10)

API 探路者

2026-5-20

分析React打包时的"Unexpected token"错误

这个报错Module build failed: SyntaxError: Unexpected token (9:10)在React打包场景里超级常见，大概率是Babel没正确配置，没法解析你的JSX或者ES6+语法，我给你梳理几个最可能的原因和对应的解决办法：

Babel缺失必要预设：React组件里的JSX语法得靠@babel/preset-react解析，ES6+的新语法（比如箭头函数、解构赋值）需要@babel/preset-env支持。要是你没装这俩依赖，或者babel配置文件（比如.babelrc、babel.config.json）里没启用它们，就会触发这个错误。
解决步骤：
1. 先装依赖：yarn add @babel/preset-react @babel/preset-env --dev
2. 在babel配置文件里添加预设：
```
{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}
```
Webpack没关联Babel loader：如果你的Webpack配置里，没给.js或.jsx文件配置babel-loader，Webpack会直接把这些文件当普通JS处理，自然解析不了JSX。
检查webpack.config.js里的module.rules，应该要有类似下面的配置：
```
module: {
  rules: [
    {
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      use: 'babel-loader'
    }
  ]
}
```
文件扩展名不匹配：要是你的组件用了.js扩展名而非.jsx，有些默认配置不会让Babel处理.js里的JSX。要么把组件扩展名改成.jsx，要么在Webpack和Babel配置里明确说明要解析.js里的JSX语法。
代码本身的语法疏漏：虽然报错提示是Unexpected token，也有可能是你第9行第10个字符的位置真的有语法错误——比如少了括号、逗号，或者用了Babel没配置支持的语法（比如可选链?.但没装@babel/plugin-proposal-optional-chaining）。你可以先仔细检查那一行的代码，看看有没有拼写或语法小问题。