升级create-react-app项目时在package.json中找不到react-scripts怎么办

第一步：确认项目是否执行过eject #

• 执行npm run eject或者yarn eject后，create-react-app会把react-scripts的所有配置、依赖拆解到项目本地，此时package.json会删除react-scripts依赖，替换为它包含的各类子依赖（比如webpack、babel相关包），同时scripts字段的命令也会直接指向本地配置文件。
• 如果确实执行过eject，无法直接通过升级react-scripts完成项目升级，两种处理方案：
  • 直接升级拆解后的所有前端工程依赖到对应版本，匹配目标react-scripts版本的依赖范围
  • 备份现有业务代码、自定义配置，用对应版本的create-react-app新建项目后迁移代码

第二步：确认依赖声明位置 #

• 检查package.json的dependencies、devDependencies两个字段，确保没有遗漏查找
• 如果项目用了pnpm的workspace、npm/yarn的monorepo结构，要确认react-scripts是否声明在根目录的package.json中，而非子项目的package.json

第三步：处理手动安装无效的问题 #

• 先删除现有依赖缓存和node_modules：

  # 用npm的情况
  rm -rf node_modules package-lock.json
  # 用yarn的情况
  rm -rf node_modules yarn.lock
  # 用pnpm的情况
  rm -rf node_modules pnpm-lock.yaml
  

• 重新安装指定版本的react-scripts，注意作为开发依赖安装：

  npm install react-scripts@[你需要的目标版本] --save-dev
  # 或者yarn
  yarn add react-scripts@[你需要的目标版本] --dev
  # 或者pnpm
  pnpm add react-scripts@[你需要的目标版本] -D
  

• 安装完成后检查package.json的devDependencies是否已经存在react-scripts的正确版本声明，再执行后续升级操作

特殊情况处理 #

• 如果之前用了第三方定制的react-scripts适配方案（比如react-app-rewired、craco替代原生react-scripts），需要先确认定制工具是否支持目标版本的react-scripts，再对应升级定制工具和react-scripts的版本。

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