Parsing error : Cannot find module '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

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

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

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

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

Answer 2

在我的例子中，我不得不禁用 VSCode ESLint 扩展。

不幸的是，当我在扩展中添加 ["next/babel"] 时，npm 运行 lint 停止了working and Eslint in vscode 没有强调任何异常。

Answer 3

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

此外，目前接受的答案对 VSCode 有效，但对我来说 npm run lint 无效。

TL;DR - 见 this answer which points to this blog。这为我修好了。

一些细节

例如，如果我有：

~
|  -- 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"
    ]
}

Answer 4

我只需在 .eslintrc 文件中添加 prettier 即可。

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

Answer 5

您也可以随时尝试更新 React，然后再更新 Next。我收到了相同的错误消息，然后更新了它们，现在我的应用程序运行正常。

将 React 版本升级到最新大多数应用程序已经使用最新版本的 React，Next.js11 React 最低版本已更新至 17.0.2。

要升级您可以运行以下命令：

npm install react@latest react-dom@latest

或使用纱线：

yarn add react@latest react-dom@latest

升级Next.js版本到最新要升级，您可以运行在终端中执行以下命令：

npm install next@latest

或

yarn add next@latest

Answer 6

ctrl + shift + p

TypeScript: Restart TS server

Answer 7

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

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

Answer 8

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

注: You don't need to create extra .babelrc file

注意：如果只替换为

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

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

Answer 9

真的，只需将 prettier 添加到 "extends": ["next/core-web-vitals] 即可得到类似 ==> {"extends": ["next/core-web-vitals", "prettier"]} 的内容，从而消除错误，而无需创建额外的 .babelrc 文件。但是需要做的另一项研究是要知道这样做是否有任何缺点，我认为答案是否定的

Answer 10

在我的项目中，我只是运行 yarn add @babel/core 和运行 ctrl + shift + p 在 vscode 中执行 ESLint: Restart ESlint Server

ESLint: Restart ESlint Server

有效，npm run lint也有效。

> Executing task: yarn run lint <

✔ No ESLint warnings or errors

Answer 11

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

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

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

Answer 12

就我而言，问题是我之前将 "eslint.packageManager": "yarn" 添加到 VSCode 的 setting.json 中，并且我尝试在使用 [ 管理的新项目中使用相同的设置=12=]。在为新工作区添加 "eslint.packageManager": "pnpm" 并重新加载 window 之后，问题就消失了。

我尝试将 "extends": ["next/babel", "next/core-web-vitals", "prettier"] 添加到 .eslintrc.js，它只会修复 VSCode 内的错误，但会在构建我的 Next.js 应用程序时导致其他错误.

Parsing error : Cannot find module 'next/babel'

Parsing error : Cannot find module 'next/babel'

next.js

babeljs

一些细节