Next.js项目执行npm run build时报错：无法加载待扩展的"react-app"配置 技术求助

这个错误很常见，原因是ESLint找不到你在.eslintrc.json里指定的react-app配置项——这个配置是Create React App自带的，但Next.js有自己的ESLint集成体系，直接引用它就会出现找不到配置的问题。下面给你两个可行的解决方案：

方案一：安装缺失的react-app配置包 #

如果你确实想继续使用react-app的ESLint规则，可以安装对应的配置包和它的依赖：

• 运行以下命令安装所有必要的依赖（包括peer dependencies）：

  npx install-peerdeps --dev eslint-config-react-app
  

• 安装完成后，重新执行npm run build，错误应该就会消失。

方案二：切换到Next.js官方ESLint配置（更推荐） #

Next.js官方提供了专门的ESLint预设，不仅能和框架完美兼容，还内置了性能相关的规则检查，更适合你的项目：

1. 先卸载可能冲突的包（可选，但能避免潜在问题）：

   npm uninstall eslint-config-react-app
   

2. 修改你的.eslintrc.json文件，替换extends部分为Next.js的预设，同时保留你需要的testing-library和jest-dom规则：

   {
     "plugins": ["testing-library", "jest-dom"],
     "extends": [
       "next/core-web-vitals",
       "plugin:testing-library/react",
       "plugin:jest-dom/recommended"
     ]
   }
   

3. 再次运行npm run build，应该就能顺利完成构建了。

补充说明 #

Next.js在初始化项目时默认已经集成了ESLint，使用next/core-web-vitals预设可以确保你的代码符合Next.js的最佳实践，同时也能完美配合你用到的测试相关插件规则，完全满足项目需求。

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