npm start启动React项目报package.json resolutions相关错误排查

问题复现场景 #

• 执行npx create-react-app初始化TypeScript模板React项目时，首先出现@types/eslint v8.4.4 missing from NPM registry报错
• 执行带版本号的初始化命令npx create-react-app@5.0.1 test --template typescript --ignore-existing绕过初始安装报错后，运行npm start启动项目时，触发package.json中resolutions相关的依赖校验报错
• 手动在package.json中添加overrides字段强制指定@types/eslint版本为8.4.3，完整package.json配置参考如下：

{
  "name": "test",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.11.42",
    "@types/react": "^18.0.14",
    "@types/react-dom": "^18.0.5",
    "gh-pages": "^4.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-helmet": "^6.1.0",
    "react-query": "^3.39.1",
    "react-router-dom": "^5.3.0",
    "react-scripts": "5.0.1",
    "recoil": "^0.7.4",
    "styled-components": "^5.3.5",
    "typescript": "^4.7.4",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@types/eslint": "^8.4.3",
    "@types/react-helmet": "^6.1.5",
    "@types/react-router-dom": "^5.3.3",
    "@types/styled-components": "^5.1.25"
  },
  "overrides": {  
    "@types/eslint": "8.4.3"
  }
}

• 配置修改后先后执行npm i @types/eslint@8.4.3、npm i -D @types/eslint@8.4.3单独安装对应版本依赖，重新运行npm start仍然报相同错误，当前运行环境为npm v8.5.5、node v16.15.0。

修复步骤 #

之前操作无效的核心原因是：仅单独安装指定版本依赖、没有清理旧的依赖缓存和锁文件，导致依赖树中仍然残留了对不存在的8.4.4版本的引用，按以下步骤操作即可修复：

1. 关闭当前运行的终端进程，进入项目根目录，手动删除node_modules文件夹、package-lock.json文件
2. 打开package.json，删除devDependencies下的"@types/eslint": "^8.4.3"行，仅保留overrides字段中的版本声明，避免重复声明导致的版本校验冲突
3. 执行命令清空本地npm缓存：

   npm cache clean --force
   

4. 执行全量依赖安装命令，不要单独安装@types/eslint：

   npm install
   

5. 依赖安装完成后，直接执行npm start即可正常启动项目。

补充说明：如果使用yarn作为包管理器，不需要配置overrides字段，改为在package.json中添加"resolutions": { "@types/eslint": "8.4.3" }后，删除yarn.lock和node_modules重新执行yarn install即可。当前使用的npm v8.5.5原生支持overrides字段，不存在版本兼容问题。

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