未能从eslintrc.json加载要扩展的配置"next/babel“

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，这些地方告诉您出于某种原因(例如，here)将eslint配置文件中的here放在其中。

这可能是对旧版本的next.js版本中的一个旧bug的黑客修正。但是(至少)2022年的夏天，考虑到next/babel是一台babel预置，而不是一种隐身预置，这么做是没有什么意义的。相反，在最近的next.js版本中，只需重置您的.eslintrc.json

{
  "extends": [
    "next"
  ]
}

有了这个设置，就不会出现错误，就像next@12.2.*一样。

您可能还想看看next的eslint customization options。例如，有些人可能会感到困惑，为什么eslint似乎不起作用。在这种情况下，请考虑this solution和the next.js docs on eslint。

如果您有这个问题，但您没有从interwebz copy+paste您的.eslintrc.json，那么您可能需要更详细地描述您的情况。

Answer 2

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

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