React-script v4升级v5（Webpack v5）遇Loader配置错误求助

问题核心 #

直接执行node --trace-deprecation node_modules/webpack/bin/webpack.js时，Webpack未加载react-scripts内置的配置，缺少处理JSX的Babel loader，导致解析错误。react-scripts封装了完整的Webpack+Babel配置，手动调用webpack命令会绕过这些预设配置。

解决步骤 #

1. 替换手动webpack命令 #

放弃直接调用webpack，改用react-scripts提供的官方脚本命令：

• 开发环境启动：npm start
• 生产环境构建：npm run build
• 测试：npm run test
  这些命令会自动加载react-scripts内置的Webpack和Babel配置，正确处理JSX语法。

2. 升级不兼容的Babel依赖 #

react-scripts 5要求@babel/core版本≥7.16.0，当前你的@babel/core是7.14.6，存在版本兼容问题。执行以下命令升级：

npm install @babel/core@^7.16.0 @babel/cli@^7.16.0 @babel/plugin-proposal-class-properties@^7.16.0 @babel/plugin-proposal-private-property-in-object@^7.16.0 @babel/plugin-proposal-private-methods@^7.16.0 --save-dev

3. 移除冲突的手动安装依赖 #

你手动安装的css-loader、sass-loader、mini-css-extract-plugin、webpack-cli，react-scripts已经内置，手动版本会和内置版本冲突导致配置混乱。执行以下命令卸载：

npm uninstall css-loader sass-loader mini-css-extract-plugin webpack-cli --save-dev

4. 清理并重新安装依赖 #

清除现有依赖和锁文件，确保依赖版本完全匹配：

rm -rf node_modules package-lock.json
npm install

5. （可选）若需自定义Webpack运行 #

如果必须手动运行Webpack调试，可使用react-app-rewired工具修改配置无需eject：

1. 安装依赖：

npm install react-app-rewired --save-dev

2. 修改package.json中的scripts：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test"
}

3. 项目根目录创建config-overrides.js，可在此添加自定义Webpack配置，默认会继承react-scripts的基础配置，自动处理JSX。

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