解析错误:找不到模块'next/babel'

Posted

技术标签:

【中文标题】解析错误:找不到模块\'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 生成了整个项目 【参考方案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 服务器

【讨论】:

以上是关于解析错误:找不到模块'next/babel'的主要内容,如果未能解决你的问题,请参考以下文章

找不到模块:错误:无法解析模块“路由”

在 src/app 外部定义的模块显示错误“找不到模块:错误:无法解析 './' in”

找不到入口模块中的错误:错误:无法解析“xxxx”中的“xxxx”解析“xxxx”

VueJS - 找不到模块:错误:无法解析'@babel/runtime/regenerator'

找不到模块:错误:无法解析“croppie”

找不到模块:错误:无法解析“vue”