手动搭建React+Webpack项目遇Module parse failed错误求助

问题根源 #

报错提示Unexpected token指向JSX语法<Menu recipes={data}/>，本质是Babel未配置React预设，无法解析JSX语法。尽管你已配置babel-loader处理.js文件，但缺少解析React语法的必要规则。

修复步骤 #

1. 安装Babel核心依赖与React预设 #

执行以下命令安装所需包：

npm install @babel/core @babel/preset-env @babel/preset-react babel-loader --save-dev

• @babel/core：Babel的核心编译工具
• @babel/preset-env：兼容不同浏览器的JS语法转换预设
• @babel/preset-react：专门解析JSX语法的预设

2. 添加Babel配置文件 #

在项目根目录创建.babelrc文件，写入以下配置：

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

这个配置会告诉Babel使用指定预设处理代码，包括解析JSX。

3. （可选）扩展Webpack的文件匹配规则 #

如果你的项目中有.jsx后缀的文件，需要修改webpack.config.js中的test规则，同时匹配.js和.jsx：

module.exports = {
  // ...其他配置
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loader: "babel-loader"
      }
    ]
  }
};

4. 重新打包验证 #

运行原命令重新打包：

npx webpack --mode development

此时Webpack会通过babel-loader调用Babel，用React预设解析JSX语法，错误应该会消失。

额外排查点 #

• 确保所有依赖版本兼容：babel-loader@8.x需要搭配@babel/core@7.x，重新安装上述命令会自动拉取兼容版本。
• 若依赖安装异常，可删除node_modules和package-lock.json后重新执行npm install。

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