重装依赖后ESLint报无法加载react-app配置如何解决

问题背景 #

此前使用ESLint时出现异常，删除项目node_modules目录后执行npm install重装依赖，代码中出现多个此前未遇到的报错，其中一个暂未找到修复方案，现寻求可行解决建议。

报错信息 #

ERROR in [eslint] Failed to load config "react-app" to extend from.
Referenced from: C:\Users\Justi\Downloads\package.json

相关配置文件 #

项目package.json内容 #

{
  "name": "gingerrmarket",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.5.0",
    "@emotion/styled": "^11.3.0",
    "@fortawesome/free-solid-svg-icons": "^5.15.4",
    "@fortawesome/react-fontawesome": "^0.1.16",
    "@material-ui/core": "^4.12.3",
    "@material-ui/icons": "^4.11.2",
    "@mui/icons-material": "^5.0.4",
    "@mui/material": "^5.1.0",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "firebase": "^9.4.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-feather": "^2.0.9",
    "react-router-dom": "^6.0.0",
    "react-scripts": "^5.0.1",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Babel ESLint解析器配置（不确定是否对排查问题有帮助） #

{
  "name": "@babel/eslint-parser",
  "version": "7.18.2",
  "description": "ESLint parser that allows for linting of experimental syntax transformed by Babel",
  "author": "The Babel Team",
  "license": "MIT",
  "engines": {
    "node": "^10.13.0 || ^12.13.0 || >=14.0.0"
  },
  "main": "./lib/index.cjs",
  "type": "commonjs",
  "exports": {
    ".": "./lib/index.cjs",
    "./experimental-worker": "./lib/experimental-worker.cjs",
    "./package.json": "./package.json"
  },
  "peerDependencies": {
    "@babel/core": ">=7.11.0",
    "eslint": "^7.5.0 || ^8.0.0"
  },
  "dependencies": {
    "eslint-scope": "^5.1.1",
    "eslint-visitor-keys": "^2.1.0",
    "semver": "^6.3.0"
  },
  "devDependencies": {
    "@babel/core": "^7.18.2",
    "dedent": "^0.7.0",
    "eslint": "^7.27.0",
    "eslint-8": "npm:eslint@^8.0.0"
  }
}

修复步骤 #

这个报错的核心原因是react-scripts 5.x版本调整了ESLint依赖的查找逻辑，重装依赖时eslint-config-react-app预设包没有被正确加载，同时从报错路径看，项目直接放在Downloads根目录，上层目录的冗余配置也可能干扰ESLint的配置查找，按以下步骤操作即可修复：

• 先把项目移动到独立的英文路径文件夹下，不要放在Downloads、桌面这类可能存在上层冗余配置文件的目录，避免路径查找异常。
• 彻底清理本地依赖和缓存：
  Windows系统在项目根目录执行：

  rd /s /q node_modules
  del package-lock.json
  npm cache clean --force
  

  macOS/Linux系统执行：

  rm -rf node_modules
  rm -f package-lock.json
  npm cache clean --force
  

• 手动安装缺失的兼容版本ESLint预设包：

  npm install eslint-config-react-app@7.0.1 eslint@8.22.0 @babel/eslint-parser@7.18.2 --save-dev
  

  不要安装9.x版本的eslint，和react-scripts 5.0.1存在版本兼容问题，会触发其他未知报错
• 在项目根目录新建.eslintrc文件，显式声明配置继承规则，避免依赖查找路径异常，文件内容如下：

  {
    "extends": ["react-app"],
    "parser": "@babel/eslint-parser",
    "parserOptions": {
      "requireConfigFile": false,
      "babelOptions": {
        "presets": ["react-app"]
      }
    }
  }
  

• 重新安装依赖并启动项目：

  npm install
  npm start
  

内容的提问来源于stack exchange，提问作者Justin Young Tech