react-app-rewired eject的CRA项目从webpack4升级webpack5报错如何解决

react-app-rewired 默认硬编码了依赖读取路径为 react-scripts，将底层 scripts 包替换为 webpack-5-react-scripts 后，rewired 无法匹配到对应包文件，因此抛出找不到 react-scripts/package.json 的错误。

• 第一步：卸载原有 react-scripts，确认webpack-5-react-scripts已正确安装
  执行如下命令：

  npm uninstall react-scripts
  npm install webpack-5-react-scripts --save
  

• 第二步：修改 package.json 中的启动脚本，为 react-app-rewired 显式指定使用的 scripts 包，在所有调用 react-app-rewired 的命令后添加 --scripts-version webpack-5-react-scripts 参数，修改后示例如下：

  {
    "scripts": {
      "start": "react-app-rewired start --scripts-version webpack-5-react-scripts",
      "build": "react-app-rewired build --scripts-version webpack-5-react-scripts",
      "test": "react-app-rewired test --scripts-version webpack-5-react-scripts",
      "eject": "react-app-rewired eject --scripts-version webpack-5-react-scripts"
    }
  }
  

• 第三步：若添加参数后仍然报错，可在项目根目录新增 .env 配置文件，添加如下内容指定 scripts 包：

  REACT_APP_SCRIPTS_VERSION=webpack-5-react-scripts
  

• 第四步：清理依赖缓存后重启项目

  rm -rf node_modules package-lock.json
  npm install
  npm start
  

该问题是替换自定义 react-scripts 包时的常见报错，所有使用 react-app-rewired 搭配非官方 react-scripts 包的开发者都会遇到该路径匹配问题，按上述步骤显式指定 scripts 包即可解决。

内容的提问来源于stack exchange，提问作者Adrián Paredes