配置Babel+Webpack时JSX无法识别，报Unexpected token错误求助

错误原因 #

你遇到的ERROR in ./src/app.js Module build failed: SyntaxError: Unexpected token，核心问题是Babel版本不兼容：项目中使用了Babel 7的核心包@babel/core，但搭配的babel-loader是7.x版本（仅适配Babel 6），导致JSX语法无法被正确转译。

具体解决步骤 #

• 升级babel-loader到适配Babel 7的版本
  先卸载旧版本，再安装兼容Babel 7的8.x版本：

  npm uninstall babel-loader
  npm install babel-loader@8.x --save-dev
  

• 替换过时的babel-cli工具
  babel-cli是Babel 6的工具，Babel 7已改用@babel/cli，执行以下操作：

  npm uninstall babel-cli
  npm install @babel/cli --save-dev
  

  同时修改package.json中的build-babel脚本，更新预设路径：

  "build-babel": "babel src/app.js --out-file=public/scripts/app.js --presets=@babel/env,@babel/react --watch"
  

• 验证配置文件
  你的.babelrc和webpack.config.js配置本身是正确的，升级依赖后Webpack会自动读取.babelrc中的预设，完成JSX转译。

• 清理依赖重装（可选）
  如果上述操作后仍有问题，清理现有依赖重新安装：

  rm -rf node_modules package-lock.json
  npm install
  

补充说明 #

Babel 7对包结构做了调整，所有核心包和预设都迁移到了@babel/命名空间下，旧版本的babel-loader无法识别这些新包，因此无法完成JSX到普通JavaScript的转译，才会出现无法识别<p>这类JSX语法的错误。

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