无法加载配置“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'

这在所有带有红色标记的导入中都显示出来。

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

Answer 1

我认为，这可能与这个奇怪的黑客修复程序有关，该修复程序在很多地方都在吹捧，它告诉您出于某种原因将其放入配置文件next/babel中（例如此处）。eslint

这可能是针对较旧的 next.js 版本中的旧错误的黑客修复。但从（至少）2022 年夏季开始，考虑到这next/babel是 babel 预设，而不是 eslint 预设，这样做就没有意义了。相反，在最近的 next.js 版本中，只需重置您的.eslintrc.json：

{
  "extends": [
    "next"
  ]
}

有了这个设置，事情就不会出错了next@12.2.*。

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

如果您遇到此问题，但您没有.eslintrc.json从 interwebz 复制+粘贴您的问题，那么您可能需要更详细地描述您的情况。

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/*/" }
  ]
}

Answer 3

或者只是替换"next"和"next/core-web-vitals"到 "plugin:@next/next/recommended"

Answer 4

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

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