升级create-react-app项目后ESLint插件加载失败问题求助

你已经排查了插件名称拼写、全局/本地安装这些常见问题，我之前遇到过类似的情况，还可以从以下几个方向试试：

1. 重新安装本地依赖，确认版本适配 #

有时候安装命令看似成功，但可能因为网络波动、缓存问题导致依赖没装全或者版本不兼容：

• 先删掉项目client目录下的node_modules文件夹和package-lock.json（用yarn的话是yarn.lock）
• 重新运行npm install（或yarn install）
• 安装完成后，检查package.json的devDependencies里是否有eslint-plugin-react，同时确认它的版本和你本地ESLint的版本匹配（比如ESLint 7.x对应eslint-plugin-react 7.x系列，ESLint 8.x对应8.x系列）

2. 验证ESLint的工作路径 #

错误里提到的__placeholder__.js有点异常，大概率是ESLint在错误的目录下查找插件了：

• 打开终端，切换到client目录，手动执行npx eslint src/hoc/Layout/Layout.jsx，看是否还会报错。如果手动执行正常，那可能是你的编辑器（比如VS Code）的ESLint插件没有正确识别.eslintrc的位置，试试重启编辑器或者重新加载ESLint插件
• 检查编辑器的ESLint设置，确认是否开启了workingDirectories配置，确保它指向client目录

3. 排查create-react-app的ESLint集成冲突 #

你的.eslintrc继承了react-app，而create-react-app本身已经内置了ESLint和react插件的配置，手动添加可能会造成冲突：

• 暂时注释掉.eslintrc里的"plugin:react/recommended"和"plugins": ["react"]这两行，然后重新验证文件。如果报错消失，说明是自定义配置和react-app内置配置冲突了，你可以直接在现有规则基础上修改，不需要手动引入react插件
• 如果你需要额外的react规则，可以参考create-react-app的文档，用extends或者直接添加规则，不要重复引入插件

4. 统一全局和本地ESLint版本 #

全局和本地安装的ESLint版本不一致，也可能导致插件加载异常：

• 执行npm list eslint查看本地ESLint版本，执行eslint -v查看全局版本
• 如果版本不同，建议卸载全局的ESLint（npm uninstall -g eslint），只用本地安装的版本——create-react-app推荐使用项目本地的依赖，这样能避免版本冲突

5. 清除ESLint缓存 #

ESLint会缓存检查结果，有时候缓存的旧路径会导致插件找不到：

• 在client目录下执行npx eslint --clear-cache，然后重新验证你的JSX文件

另外，我注意到你的.eslintrc最后一条规则"no-case-declarations": 0,后面多了个逗号，虽然这不是插件找不到的直接原因，但可能会引发配置解析错误，建议删掉这个多余的逗号，避免其他潜在问题。

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