在根目录中创建名为 .babelrc 的文件并添加以下代码：

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

在 .eslintrc 中，将现有代码替换为：

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

注意 ： 您不需要创建额外的 .babelrc 文件

在您的 NextJS 项目中，您有此文件，名为 .eslintrc.json ， 在此文件中

您有以下代码

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

将其替换为

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

注意 ：如果您仅替换为

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

红色错误符号会消失，但代码不会编译并给出编译错误。

我也遇到了同样的问题 - 但仅当我没有直接打开项目文件夹时才会出现。这似乎与 ESLint 需要如何为工作区配置有关。

此外，当前接受的答案适用于 VSCode，但对我来说会破坏 npm run lint 。

TL;DR - 请参阅 这个答案 ，它指向 这个博客 。这帮我解决了这个问题。

一些细节

例如，如果我有：

~
|  -- some_folder
|     | -- project_1
|     | -- project_2
|     ...files relating to both projects...

我通常只会 cd ~/some_folder && code .

但是然后我得到了与您遇到的相同错误。但是，如果我 cd ~/some_folder/project_1 && code . 然后一切都正常。

如果您也是这种情况，那么您需要（如上面的链接所述）是：

• 创建工作区配置
• 指定需要运行 ESLint 的文件夹

您可以从 VSCode 轻松完成此操作。最终结果（按照我上面的例子）是一个名为 ~/some_folder/.vscode/settings.json 的文件，内容为

{
    "eslint.workingDirectories": [
        "./project_1",
        "./project_2"
    ]
}