解析错误:找不到模块'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”