Babel编译失败报Unexpected Token错误，配置无误仍求助

嘿，我之前也碰到过一模一样的问题——明明配了React preset，JSX还是被当成意外语法报错。大概率是Webpack的loader配置没到位，或者依赖没装全，给你梳理几个排查步骤：

1. 先把Webpack的Loader规则补全 #

你贴的Webpack配置只写了开头，估计是没正确配置babel-loader来处理JS/JSX文件。完整的规则应该是这样的：

module: {
  rules: [
    {
      test: /\.(js|jsx)$/, // 一定要匹配.js和.jsx两种后缀
      exclude: /node_modules/, // 别转译node_modules里的第三方包，浪费性能还容易出问题
      use: 'babel-loader' // 用babel-loader来处理这些文件
    }
  ]
}

另外记得给Webpack加上后缀解析，避免文件引用出问题：

resolve: {
  extensions: ['.js', '.jsx'] // 让Webpack自动识别这两种后缀
}

2. 确认所有依赖都装齐了 #

有时候配置写对了，但核心依赖没装，也会白搭。执行这条命令把所有必需的Babel相关包装上：

npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-2 babel-preset-env

如果用Yarn的话就换成yarn add --dev开头的命令。

3. 验证Babel本身能不能转译JSX #

先排除Babel配置的问题，创建一个简单的测试文件test.js：

const element = <div>Test JSX</div>;
console.log(element);

然后用Babel直接转译：

npx babel test.js --presets react,es2015

如果转译后能得到正常的JS代码，说明Babel配置没问题，问题肯定在Webpack的loader上；如果转译失败，那就是你的.babelrc配置写错了，或者preset没装对。

4. 如果你用的是Babel 7+，注意配置要更新 #

要是你装的是新版Babel（7.x以上），原来的preset名称都变了，.babelrc得改成这样：

{
  "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-stage-2"],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

对应的依赖包也要换成@babel/core、@babel-loader、@babel/preset-env这些带@babel前缀的。

按这些步骤排查下来，应该能解决你的问题～

内容的提问来源于stack exchange，提问作者Axwack