修改ESLint后React错误不再在浏览器显示的问题求助

我参与的一个多人协作项目基于Create React App（CRA）创建，使用React 17。之前项目中如果存在React/ESLint错误，编译会直接失败，并且浏览器会显示对应的错误信息。但在调整ESLint配置及部分依赖后，现在ESLint错误仅出现在IDE的Problems标签和浏览器开发者工具中，浏览器会出现冻结现象，不再主动显示错误提示。

当前的.eslintrc.js配置：

module.exports = {
  env: {
    browser: true,
    node: true,
    es6: true,
    es2021: true,
  },
  extends: ['airbnb', 'prettier'],
  overrides: [],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module',
  },
  ignorePatterns: ['src/assets/js/*.js', 'node_modules/*'],
  plugins: ['react', 'prettier'],
  rules: {
    'prettier/prettier': ['error'],
    'react/prop-types': 'off',
    'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],
    camelcase: 'off',
    'jsx-a11y/no-static-element-interactions': 'off',
    'import/no-extraneous-dependencies': 'off',
    'default-param-last': 'off',
  },
};

package.json中的相关ESLint依赖：

{
  "eslint-config-airbnb": "^19.0.4",
  "eslint-config-prettier": "^8.5.0",
  "eslint-plugin-import": "^2.26.0",
  "eslint-plugin-jsx-a11y": "^6.6.1",
  "eslint-plugin-prettier": "^4.2.1",
  "eslint-plugin-react": "^7.31.11",
  "eslint-plugin-react-hooks": "^4.6.0"
}

注：仅修改了ESLint配置及相关依赖，不排除是本地非ESLint错误，但可能性较低。

1. 检查CRA默认ESLint集成是否被干扰 #

CRA默认会将ESLint错误视为编译错误（阻断编译并在浏览器显示），手动修改配置可能破坏这一逻辑：

• 确认package.json中是否存在eslintConfig字段，若有，检查其与.eslintrc.js是否冲突，CRA优先读取package.json内的配置。
• 排查是否安装了eslint-webpack-plugin等第三方插件，这类插件可能替代CRA原生的ESLint处理流程，导致错误不再阻断编译。

2. 验证ESLint规则的错误级别 #

确保核心错误规则的级别为error，否则不会触发编译阻断：

• 运行eslint --print-config src/App.jsx > eslint-config-output.js查看最终生效的规则，确认react-hooks/rules-of-hooks等关键React规则是否为error级别。
• 检查airbnb配置是否被prettier意外覆盖关键规则，虽然你已经将prettier放在extends最后，但仍需确认核心规则未被降级为warn或off。

3. 排查依赖版本兼容性问题 #

React 17与部分高版本ESLint插件可能存在兼容性冲突：

• 尝试降级eslint-plugin-react到7.29.0，该版本对React 17的兼容性更稳定。
• 执行npm ls eslint-plugin-react查看依赖树，确认是否存在版本不一致的情况，若有，执行npm dedupe或手动锁定兼容版本。
• 将eslint-plugin-react-hooks降级到^4.2.0，过高版本可能与CRA的Webpack集成逻辑冲突。

4. 恢复CRA默认ESLint配置测试 #

暂时禁用自定义配置，验证是否能恢复原有错误处理行为：

• 重命名.eslintrc.js为.eslintrc.js.bak，删除package.json中的eslintConfig字段（若存在）。
• 删除node_modules和package-lock.json，重新执行npm install。
• 故意引入一个ESLint错误（比如违反Hook规则），观察编译是否失败并在浏览器显示错误。若恢复正常，说明问题出在自定义配置中。

5. 定位浏览器冻结的原因 #

浏览器冻结大概率是错误未被正确处理导致的无限循环或错误堆积：

• 打开浏览器Console标签，查看是否有大量重复报错，若有，说明某个规则触发了循环冲突（比如Prettier格式规则与代码反复不匹配）。
• 暂时关闭prettier/prettier规则，若浏览器不再冻结，说明是Prettier与ESLint集成问题，可检查.prettierrc配置是否与ESLint规则冲突，或降级eslint-plugin-prettier到^4.0.0版本。

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