无法加载配置文件"next/babel"以扩展eslintrc.json。

Question

当我尝试构建Next.Js应用程序时，成功构建后会出现以下错误。在Vercel部署应用程序时会显示此错误。

error - ESLint: Failed to load config "next/babel" to extend from. Referenced from: /vercel/path0/.eslintrc.json

这是我的.eslintrc.json

{
  "extends": ["next/babel","next/core-web-vitals"]
}

我还添加了.babelrc

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

我在修改下列 eslintrc.json 文件后找到了解决方法:

{
  "extends": ["next","next/core-web-vitals"]
}

如果构建应用程序时没有显示任何错误，则表示解决方案有效。但是，当我使用上述解决方案时，会出现另一个问题，即：

Parsing error: Cannot find module 'next/babel'

在所有的导入文件中都显示为红色标记。

我尝试搜索解决方案，但没有找到任何解决方案。

- DCodeMania

---

你的 package.json 是什么？ - Mr Special

我也遇到了完全相同的问题。你解决了吗？ - Pongbao

Answer 1

我认为这可能与一些地方宣传的奇怪hackfix有关，该hackfix告诉你在eslint配置文件中放置next/babel（例如在这里）。

这可能是旧版next.js中的一个旧漏洞的hackfix。 但是至少在2022年夏季之后，考虑到next/babel是babel预设而不是eslint预设，这样做似乎没有多大意义。相反，在最近的next.js版本中，只需重置您的.eslintrc.json：

{
  "extends": [
    "next"
  ]
}

使用这个设置，自从next@12.2.*之后，事情就不会出错了。

你还可能想看看next的eslint自定义选项。例如，有些人可能会困惑为什么eslint似乎没有起作用。 在这种情况下，请考虑这个解决方案和next.js文档上的eslint。

如果你遇到这个问题，但是你没有从网络上复制+粘贴你的.eslintrc.json，那么你可能需要更详细地描述你的情况。

- Domi

Answer 2

使用pnpm时出现了同样的Turborepo问题。这个链接对我有帮助： https://github.com/vercel/next.js/issues/40687#issuecomment-1275184829

基本上，将以下内容添加到您的settings.json中：

// .vscode/settings.json

{
  "eslint.workingDirectories": [
    { "pattern": "apps/*/" },
    { "pattern": "packages/*/" }
  ]
}

- wongz

Answer 3

这段代码解决了我的问题，只需将其复制粘贴到eslintrc.json文件中即可。

{
  "extends": ["next/babel","next/core-web-vitals"]
}

- Md Sajedul Islam

Answer 4

或者只需将"next"和"next/core-web-vitals"替换为"plugin:@next/next/recommended"

https://nextjs.org/docs/basic-features/eslint

- Sacru2red

Answer 5

在使用 TurboRepo 的 with-tailwind 示例时，我遇到了这个问题。

一些奇怪的事情发生了，ESlint 正常工作，但是出现了这个错误。我通过将 next 添加为 eslint-custom-config 的开发依赖项来解决它：

pnpm install next@latest -D

{
  "name": "eslint-config-custom",
  "version": "0.0.0",
  "license": "MIT",
  "main": "index.js",
  "dependencies": {
    ...
  },
  "devDependencies": {
    "next": "^13.2.4"
  },
  "publishConfig": {
    "access": "public"
  }
}

- Paul

Answer 6

在使用 TurboRepo 时我遇到了这个问题。对我来说解决方案是将 next 添加为单仓库根目录下的 devDependency。

- Farzad Soltani