升级react-scripts至v5.0.1后Jenkins出现ESLint配置错误求助

升级react-scripts到v5.0.1并同步升级ESLint相关插件和配置后，本地运行正常，但Jenkins构建时触发ESLint 8.35.0错误，提示"prettier/react"已在eslint-config-prettier 8.0.0中合并到"prettier"。

错误详情 #

Oops! Something went wrong! :(
ESLint: 8.35.0

Error: Cannot read config file: /home/jenkins/workspace/ Error: "prettier/react" has been merged into "prettier" in eslint-config-prettier 8.0.0. See: https://github.com/prettier/eslint-config-prettier/blob/main/CHANGELOG.md#version-800-2021-02-21
Referenced from: /home/jenkins/workspace/.eslintrc.json
at Object.<anonymous> (/home/jenkins/workspace/node_modules/eslint-config-prettier/react.js:1:7)
at Module._compile (internal/modules/cjs/loader.js:1085:14)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
at Module.load (internal/modules/cjs/loader.js:950:32)
at Function.Module._load (internal/modules/cjs/loader.js:790:12)
at Module.require (internal/modules/cjs/loader.js:974:19)
at Object.module.exports [as default] (/home/jenkins/workspace/node_modules/import-fresh/index.js:32:59)
at loadJSConfigFile (/home/jenkins/workspace/node_modules/@eslint/eslintrc/dist/eslintrc.cjs:2562:47)
at loadConfigFile (/home/jenkins/workspace/node_modules/@eslint/eslintrc/dist/eslintrc.cjs:2646:20)
at ConfigArrayFactory._loadConfigData (/home/jenkins/workspace/node_modules/@eslint/eslintrc/dist/eslintrc.cjs:2963:42).

现有配置文件 #

.eslintrc.js #

{
  "parser": "@babel/eslint-parser",
  "root": true,
  "env": {
    "browser": true,
    "node": true
  },
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module",
    "requireConfigFile": false,
    "babelOptions": {
      "presets": ["@babel/preset-react"]
    },
    "ecmaFeatures": {
      "jsx": true,
      "modules": true
    }
  },
  "extends": [
    "airbnb",
    "airbnb/hooks",
    "plugin:cypress/recommended",
    "plugin:import/typescript",
    "plugin:react/recommended",
    "plugin:jsx-a11y/recommended",
    "prettier"
  ],
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "settings": {
    "react": {
      "version": "detect"
    },
    "import/resolver": {
      "node": {
        "paths": [
          "src",
          "cypress"
        ],
        "extensions": [
          ".js",
          ".jsx",
          ".ts",
          ".tsx"
        ]
      }
    }
  },
  "plugins": [
    "react",
    "react-hooks",
    "cypress",
    "json"
  ]
}

package.json（devDependencies及eslintConfig部分） #

"devDependencies": {
  "@babel/eslint-parser": "7.19.1",
  "@babel/preset-env": "7.20.2",
  "@babel/preset-react": "7.18.6",
  "allure-commandline": "^2.20.1",
  "concurrently": "^7.6.0",
  "cross-env": "^7.0.3",
  "eslint-config-airbnb": "19.0.4",
  "eslint-config-prettier": "8.6.0",
  "eslint-config-react": "1.1.7",
  "eslint-plugin-cypress": "2.12.1",
  "eslint-plugin-import": "2.27.5",
  "eslint-plugin-json": "3.1.0",
  "eslint-plugin-jsx-a11y": "6.7.1",
  "eslint-plugin-prettier": "^4.2.1",
  "json-server": "^0.15.1",
  "lint-staged": "8.1.1",
  "package-json-merge": "0.0.1",
  "prettier": "2.8.4"
},
"eslintConfig": {
  "extends": [
    "react-app",
    "react-app/jest"
  ]
}

解决方案 #

1. 移除残留的prettier/react配置 #

错误提示明确指出引用来自.eslintrc.json，但你提供的是.eslintrc.js，说明Jenkins环境下存在多余的.eslintrc.json文件：

• 登录Jenkins工作目录，找到并打开.eslintrc.json，检查extends数组，移除其中的"prettier/react"项，仅保留"prettier"即可。
• 如果未找到该文件，运行npx eslint --print-config .查看最终合并的ESLint配置，定位prettier/react的来源并移除。

2. 清理Jenkins构建缓存 #

本地正常但Jenkins报错，大概率是缓存了旧依赖或配置：

• 在Jenkins构建脚本中添加清理步骤：

  rm -rf node_modules package-lock.json
  npm install
  

• 或开启Jenkins工作空间的"构建前清理"选项，确保每次构建用全新依赖环境。

3. 移除冗余依赖 #

package.json中的eslint-config-react是过时冗余包，直接卸载：

npm uninstall eslint-config-react

4. 验证配置 #

本地运行npx eslint .确认无错误后，推送代码到Jenkins重新构建。

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