[英]Parsing error : Cannot find module 'next/babel'
I have been encountering this error on every single new Next.js project that I create.我在创建的每个新 Next.js 项目上都遇到过这个错误。 The page can be compiled without any problem, it just keeps on showing as error on the first line in every js file.
该页面可以毫无问题地编译,它只是在每个 js 文件的第一行一直显示为错误。
Parsing error: Cannot find module 'next/babel' Require stack:解析错误:找不到模块 'next/babel' 需要堆栈:
Create file called .babelrc
in your root directory and add this code:在根目录中创建名为
.babelrc
的文件并添加以下代码:
{
"presets": ["next/babel"],
"plugins": []
}
And in .eslintrc
, replace the existing code with:在
.eslintrc
中,将现有代码替换为:
{
"extends": ["next/babel","next/core-web-vitals"]
}
I had this same problem - but only when I wasn't opening the project folder directly.我遇到了同样的问题 - 但只有当我没有直接打开项目文件夹时。 It appears to be related to how ESLint needs to be configured for workspaces.
它似乎与如何为工作区配置 ESLint 有关。
In addition, the currently accepted answer works for VSCode but breaks npm run lint
for me.此外,当前接受的答案适用于 VSCode,但对我来说破坏了
npm run lint
。
TL;DR - see this answer which points to this blog . TL;DR - 请参阅指向此博客的答案。 This fixed it for me.
这为我修好了。
For example, if I have:例如,如果我有:
~
| -- some_folder
| | -- project_1
| | -- project_2
| ...files relating to both projects...
I'll often just cd ~/some_folder && code .
我经常只是
cd ~/some_folder && code .
But then I get the same error you're experiencing.但是后来我遇到了同样的错误。 However, if I
cd ~/some_folder/project_1 && code .
但是,如果我
cd ~/some_folder/project_1 && code .
then everything works fine.然后一切正常。
If that's the case for you as well, then what you need (as described in the links above) is to:如果您也是这种情况,那么您需要(如上面的链接中所述)是:
You can do this easily from VSCode.您可以从 VSCode 轻松完成此操作。 The net result (following my example above) is a file named
~/some_folder/.vscode/settings.json
with contents最终结果(按照我上面的示例)是一个名为
~/some_folder/.vscode/settings.json
的文件,其内容
{
"eslint.workingDirectories": [
"./project_1",
"./project_2"
]
}
In your NextJS Project you have this file , named
.eslintrc.json , In this file
In your NextJS Project you have this file , named
.eslintrc.json的文件, In this file
You have following code您有以下代码
{
"extends": "next/core-web-vitals"
}
Replace it with
{
"extends": ["next/babel","next/core-web-vitals"]
}
Note : You don't need to create extra .babelrc file
注意:
You don't need to create extra .babelrc file
Note : If you only replace with注意:如果您只替换为
{
"extends": ["next/babel"]
}
The red error sign will go but the code won't compile and gives compile error.红色错误标志会消失,但代码不会编译并给出编译错误。
For Nextjs 12
add prettier
in .eslintrc.json
file inside your root folder.对于
Nextjs 12
,在根文件夹内的.eslintrc.json
文件中添加prettier
的文件。
{
"extends": ["next/core-web-vitals", "prettier"]
}
It worked for me by just adding prettier
in .eslintrc
file.通过在
.eslintrc
文件中添加prettier
的内容,它对我有用。
{
"extends": ["next", "prettier"]
}
Using Next.js, TypeScript, and Tailwind CSS, I updated the .eslintrc.json file with:使用 Next.js、TypeScript 和 Tailwind CSS,我更新了.eslintrc.json文件:
{
"extends": ["next/babel", "next/core-web-vitals"]
}
then ctrl + shift + p
and search for ESLint: Restart ESLint Server
.然后
ctrl + shift + p
并搜索ESLint: Restart ESLint Server
。
Just had this issue with the Nextjs app and the following worked for me. Nextjs 应用程序刚刚遇到这个问题,以下对我有用。 I no longer have issue with next/babel and I can run yarn lint .
我不再有 next/babel 的问题,我可以运行 yarn lint 。
Add prettier to your project将 prettier 添加到您的项目中
yarn add --dev eslint-config-prettier
Update your eslint config as follows如下更新您的 eslint 配置
{
"extends": ["prettier", "next/core-web-vitals"]
}
Add global vscode settings and include your project path添加全局 vscode 设置并包含您的项目路径
{
"eslint.workingDirectories": ["./your-project"]
}
In my case I had to disable VSCode ESLint extension.就我而言,我不得不禁用 VSCode ESLint 扩展。
Unfortunately when I added ["next/babel"] in extends, the npm run lint stopped working and Eslint in vscode did not underlining any abnormalities.不幸的是,当我在扩展中添加["next/babel"]时, npm run lint停止工作,并且 vscode 中的 Eslint 没有下划线任何异常。
You can also always try updating React and then Next.你也可以随时尝试更新 React 然后 Next。 I had the same error message then updated them both and now my app is working fine.
我收到了相同的错误消息,然后更新了它们,现在我的应用程序运行正常。
Upgrade React version to latest Most applications already use the latest version of React, with Next.js 11 the minimum React version has been updated to 17.0.2.将 React 版本升级到最新 大多数应用程序已经使用最新版本的 React,在 Next.js 11 中,最低 React 版本已更新到 17.0.2。
To upgrade you can run the following command:要升级,您可以运行以下命令:
npm install react@latest react-dom@latest
Or using yarn:或使用纱线:
yarn add react@latest react-dom@latest
Upgrade Next.js version to latest To upgrade you can run the following command in the terminal:将 Next.js 版本升级到最新版本要升级,您可以在终端中运行以下命令:
npm install next@latest
or或者
yarn add next@latest
ctrl + shift + p ctrl + shift + p
TypeScript: Restart TS server
TypeScript:重启 TS 服务器
In .eslintrc.json
在
.eslintrc.json
{
"extends": "next/babel"
}
Create .babelrc
创建
.babelrc
{
"presets": ["next/babel"],
"plugins": []
}
真的,只需将prettier
添加到"extends": ["next/core-web-vitals]
以具有类似 ==> {"extends": ["next/core-web-vitals", "prettier"]}
的内容,得到消除错误,无需创建额外的.babelrc文件。但是需要做的另一项研究是知道这样做是否有任何缺点,我认为答案是否定的
In my project, i just run yarn add @babel/core
and run ctrl + shift + p
in vscode, excute ESLint: Restart ESlint Server
在我的项目中,我只是运行
yarn add @babel/core
并在 vscode 中运行ctrl + shift + p
,执行ESLint: Restart ESlint Server
ESLint: Restart ESlint Server
ESLint:重启 ESLint 服务器
it works, and npm run lint
works fine too.它可以工作,并且
npm run lint
也可以正常工作。
> Executing task: yarn run lint <
✔ No ESLint warnings or errors
In my case, the problem is that I added "eslint.packageManager": "yarn"
to the setting.json
of VSCode before, and I tried to use the same setup within a new project managed with pnpm
.就我而言,问题是我之前在 VSCode 的
setting.json
中添加了"eslint.packageManager": "yarn"
,并且我尝试在使用pnpm
管理的新项目中使用相同的设置。 After adding "eslint.packageManager": "pnpm"
for the new workspace, and reload window, than the issue's gone.在为新工作区添加
"eslint.packageManager": "pnpm"
并重新加载窗口后,问题就消失了。
I've tried adding "extends": ["next/babel", "next/core-web-vitals", "prettier"]
to .eslintrc.js
, it will fix the error only within VSCode, but will cause the other error when building my Next.js app.我尝试将
"extends": ["next/babel", "next/core-web-vitals", "prettier"]
添加到.eslintrc.js
,它只会在 VSCode 中修复错误,但会导致其他错误构建我的 Next.js 应用程序时出错。
我遇到了同样的问题 - 关闭 IDE 并使用项目文件夹重新打开它!
In my case, the issue occurs when I code in VSCode and use pnpm
as the package manager, I tried lots of methods in StackOverflow, and finally, I find out that it's the duty of the VSCode ESLint plugin.就我而言,当我在 VSCode 中编写代码并使用
pnpm
作为包管理器时会出现问题,我在 StackOverflow 中尝试了很多方法,最后我发现这是 VSCode ESLint 插件的职责。
So, to fix the problem without uninstalling the plugin, add the following configuration in the .vscode/settings.json
and reload your editor.因此,要在不卸载插件的情况下解决问题,请在
.vscode/settings.json
中添加以下配置并重新加载您的编辑器。
{
"eslint.packageManager": "pnpm"
}
Try updating the .eslintrc.json
file to尝试将
.eslintrc.json
文件更新为
{
"extends": ["next", "prettier","next/core-web-vitals"],
"plugins": ["prettier"]
}
Also install prettier plugin if you don't have it already如果你还没有,也安装更漂亮的插件
npm install eslint-plugin-prettier@latest --save-dev
Don't have to include .babelrc
file as it will replace Nextjs SWC compiler S不必包含
.babelrc
文件,因为它将替换 Nextjs SWC 编译器 S
I found this error in project with PNPM, ESLint, and Monorepo architecture using Turborepo.我在使用 Turborepo 的 PNPM、ESLint 和 Monorepo 架构的项目中发现了这个错误。
add this into the ESLint config file:将其添加到 ESLint 配置文件中:
parserOptions: {
babelOptions: {
presets: [require.resolve('next/babel')],
},
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.