解析错误：找不到模块'next/babel'答案

【问题标题】：Parsing error : Cannot find module 'next/babel'解析错误：找不到模块'next/babel'
【发布时间】：2021-09-10 18:14:31
【问题描述】：

我在创建的每个新 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

【问题讨论】：

您有.babelrc 文件吗？你使用的是哪个版本的 Next.js？
我找不到.babelrc 文件。我在 Next.js v11.0.1 上。 babelrc文件丢失正常吗？我用 npx create-next-app 生成了整个项目

标签： next.js babeljs

【解决方案1】：

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

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

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

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

【讨论】：

只要我替换了 eslintrc 扩展，它就消失了！非常感谢！
这有什么可能的副作用？
这真的很有帮助。
谢谢！出于某种原因，即使在使用 create-next-app 进行初始安装时，我也遇到了错误。这解决了它！
我试过这个，但奇怪的是 eslint 刚刚停止工作。你知道这是什么原因吗？

【解决方案2】：

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

此外，目前接受的答案适用于 VSCode，但对我来说却打破了npm run lint。

TL;DR - 请参阅指向 this blog 的 this answer。这为我解决了问题。

一些细节

例如，如果我有：

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

【讨论】：

这为我解决了问题。我有一个单一存储库，其中包含两个相互影响的不同 eslint 配置。通过如上所述创建工作区配置，问题就消失了。
上面的~/some_project/.vscode/settings.json应该是~/some_folder/.vscode/settings.json吧？
@revelt - 哎呀，是的！我已经编辑了答案

【解决方案3】：

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

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

【讨论】：

谢谢它的工作。
不客气。@MadduSwaroop
应该在顶部，这是最新的工作解决方案。

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

就我而言，我不得不禁用 VSCode ESLint 扩展。

不幸的是，当我在 extends 中添加 ["next/babel"] 时，npm run lint 停止工作，并且 vscode 中的 Eslint 没有下划线任何异常。

【讨论】：

如果你禁用了 vs code eslint 扩展那么它不会下划线异常

【解决方案7】：

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

将 React 版本升级到最新版本大多数应用程序已经使用最新版本的 React，Next.js 11 的最低 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

【讨论】：

【解决方案8】：

ctrl + shift + p

TypeScript：重启 TS 服务器

【讨论】：