解析错误：找不到模块“next/babel”

Question

我在创建的每个新 Next.js 项目中都遇到了这个错误。该页面可以毫无问题地编译，它只是在每个 js 文件的第一行一直显示为错误。

解析错误：找不到模块“next/babel”需要堆栈：

• D:\app\next_app\ratu-seo\node_modules\next\dist\compiled\babel\bundle.js
• D:\app\next_app\ratu-seo\node_modules\next\dist\compiled\babel\eslint-parser.js
• D:\app\next_app\ratu-seo\node_modules\eslint-config-next\parser.js
• D:\app\next_app\ratu-seo\node_modules@eslint\eslintrc\lib\config-array-factory.js
• D:\app\next_app\ratu-seo\node_modules@eslint\eslintrc\lib\index.js
• D:\app\next_app\ratu-seo\node_modules\eslint\lib\cli-engine\cli-engine.js
• D:\app\next_app\ratu-seo\node_modules\eslint\lib\cli-engine\index.js
• D:\app\next_app\ratu-seo\node_modules\eslint\lib\api.js
• c:\Users\Admin.vscode\extensions\dbaeumer.vscode-eslint-2.1.23\server\out\eslintServer.js

Answer 1

笔记：You don't need to create extra .babelrc file

In your NextJS Project you have this file , named .eslintrc.json , In this file

你有以下代码

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

Replace it with

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

注意：如果您仅替换为

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

红色错误标志将会消失，但代码不会编译并给出编译错误。

Answer 2

我遇到了同样的问题 - 但只有当我没有直接打开项目文件夹时。它似乎与需要如何为工作区配置 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以内容命名的文件

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

Answer 3

在您的根目录中创建名为 .babelrc 的文件并添加此代码

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

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

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

Answer 4

用于在根文件夹中Nextjs 12添加prettier文件。.eslintrc.json

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

Answer 5

就我而言，当我在 VSCode 中编码并用作包管理器时，就会出现问题pnpm，我在 StackOverflow 中尝试了很多方法，最后，我发现这是 VSCode ESLint 插件的职责。

因此，要在不卸载插件的情况下解决问题，请在 中添加以下配置.vscode/settings.json并重新加载编辑器。

{
  "eslint.packageManager": "pnpm"
}

Answer 6

使用 Next.js、TypeScript 和 Tailwind CSS，我使用以下内容更新了.eslintrc.json文件：

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

然后ctrl + shift + p搜索ESLint: Restart ESLint Server.

Answer 7

对我来说，可以在应用程序版本的 NextJS 13 中编辑此文件：.eslintrc.json

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

Answer 8

prettier只需添加文件即可对我起作用.eslintrc。

{
  "extends": ["next", "prettier"]
}

Answer 9

尝试将.eslintrc.json文件更新为

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

如果您还没有安装 prettier 插件，请安装它

npm install eslint-plugin-prettier@latest --save-dev

不必包含.babelrc文件，因为它将替换 Nextjs SWC 编译器 S

Answer 10

我遇到了同样的问题 - 关闭 IDE 并使用项目文件夹重新打开它！

Answer 11

我的问题

\n

我在使用 Turborepo 的 PNPM、ESLint 和 Monorepo 架构的项目中发现了此错误。

\n

\xe2\x9a\xa0\xef\xb8\x8f 警告！

\n

2023 年 8 月 27 日更新：我创建了一个新的 Turborepo 项目，并再次遇到了这个问题，我发现，实施此解决方案将默默地禁用整个 ESLint 系统。

\n

请小心！我建议不要再使用此解决方案！

\n

我的解决方案

\n

将其添加到 ESLint 配置文件中：

\n

parserOptions: {\n    babelOptions: {\n      presets: [require.resolve(\'next/babel\')],\n    },\n  },\n

\n