如何解决React应用中的ESLint 'react'插件冲突问题

以下是几种可行的修复方案，按从易到难的顺序尝试：

方案1：清除ESLint缓存 #

ESLint缓存残留可能引发冲突，执行命令清除缓存：

npx eslint --clear-cache

执行完成后重启开发服务器。

方案2：修正项目路径大小写 #

从错误信息可看到，项目路径存在大小写不一致：documents和Documents、projects和Projects。Windows系统虽对路径大小写不敏感，但Node模块解析时可能因此触发重复加载，导致插件冲突。

• 统一项目文件夹路径的大小写（比如全部改为小写或大写）
• 确保IDE打开项目时使用的路径和文件系统实际路径完全一致
• 重新执行npm install并启动项目

方案3：手动指定ESLint配置 #

在项目根目录创建.eslintrc.json文件，手动锁定react插件配置，覆盖默认规则：

{
  "extends": "react-app",
  "plugins": ["react"],
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

保存文件后重启开发服务器。

方案4：降级react-scripts版本 #

部分新版本的react-scripts存在ESLint配置兼容问题，尝试降级到稳定版本：

npm install react-scripts@4.0.3 --save

可根据实际情况选择其他4.x系列的稳定版本。

方案5：临时禁用ESLint验证 #

如果以上方法均无效，可临时禁用ESLint确认是否为配置问题，修改package.json中的启动命令：

"scripts": {
  "start": "DISABLE_ESLINT_PLUGIN=true react-scripts start",
  "build": "DISABLE_ESLINT_PLUGIN=true react-scripts build"
}

注意：这仅为临时排查方案，建议找到根本原因后重新启用ESLint。

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