Next.js/ESLint报错：无法找到模块‘next/babel’的解决求助

问题根源 #

你之前把"next/babel"加到ESLint配置的extends里是错误操作——next/babel是Babel编译预设，并非ESLint的可共享配置。编辑器里这么加暂时消除了高亮，但命令行执行ESLint或构建时，ESLint会误以为它是ESLint配置包，自然找不到导致报错。而编辑器最初的解析错误，是因为ESLint插件没正确识别Next.js内置的Babel配置。

正确解决步骤 #

1. 恢复正确的ESLint基础配置
   把.eslintrc.json改回Next.js生成的默认状态，只保留官方推荐的核心规则：

   {
     "extends": "next/core-web-vitals"
   }
   

   彻底删掉"next/babel"这一项。

2. 显式配置Babel预设
   在项目根目录创建（或修改）babel.config.json文件，明确告诉Babel使用Next.js的预设：

   {
     "presets": ["next/babel"]
   }
   

   这样ESLint就能通过Babel的配置正确解析JS文件，编辑器里的解析错误会自动消失。

3. 清理缓存&重置依赖

   • 删除ESLint缓存文件：rm .eslintcache（Windows用户执行del .eslintcache）
   • 重置依赖：

     rm -rf node_modules package-lock.json
     npm install
     

   • 重启VSCode（确保编辑器加载新配置）

4. 验证效果

   • 打开项目JS文件，检查编辑器的ESLint高亮错误是否消失
   • 运行命令行检查：npx eslint .，确认无"无法找到配置‘next/babel’"的错误
   • 执行构建：npm run build，验证构建流程正常

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