Parsing error cannot find module next babel - Исправление ошибок и поиск оптимальных решений проблем

I have been encountering this error on every single new Next.js project that I create. The page can be compiled without any problem, it just keeps on showing as error on the first line in every js file.

Parsing error: Cannot find module ‘next/babel’
Require stack:

D:appnext_appratu-seonode_modulesnextdistcompiledbabelbundle.js
D:appnext_appratu-seonode_modulesnextdistcompiledbabeleslint-parser.js
D:appnext_appratu-seonode_moduleseslint-config-nextparser.js
D:appnext_appratu-seonode_modules@eslinteslintrclibconfig-array-factory.js
D:appnext_appratu-seonode_modules@eslinteslintrclibindex.js
D:appnext_appratu-seonode_moduleseslintlibcli-enginecli-engine.js
D:appnext_appratu-seonode_moduleseslintlibcli-engineindex.js
D:appnext_appratu-seonode_moduleseslintlibapi.js
c:UsersAdmin.vscodeextensionsdbaeumer.vscode-eslint-2.1.23serverouteslintServer.js

asked Jun 28, 2021 at 12:29

mitchiri_nekomitchiri_neko

1,2612 gold badges6 silver badges11 bronze badges

Create file called .babelrc in your root directory and add this code:

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

And in .eslintrc, replace the existing code with:

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

answered Jun 30, 2021 at 11:32

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.

In addition, the currently accepted answer works for VSCode but breaks npm run lint for me.

TL;DR — see this answer which points to this blog. This fixed it for me.

Some Details

For example, if I have:

~
|  -- some_folder
|     | -- project_1
|     | -- project_2
|     ...files relating to both projects...

I’ll often just cd ~/some_folder && code .

But then I get the same error you’re experiencing. However, if I 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:

Create a workspace config
Specify folders where you need ESLint to run

You can do this easily from VSCode. The net result (following my example above) is a file named ~/some_folder/.vscode/settings.json with contents

{
    "eslint.workingDirectories": [
        "./project_1",
        "./project_2"
    ]
}

answered Aug 18, 2021 at 19:56

Craig KellyCraig Kelly

3,4062 gold badges17 silver badges17 bronze badges

Note: You don't need to create extra .babelrc 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: If you only replace with

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

The red error sign will go but the code won’t compile and gives compile error.

answered Dec 20, 2021 at 11:36

For Nextjs 12 add prettier in .eslintrc.json file inside your root folder.

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

answered Dec 3, 2021 at 16:19

MelMel

8288 silver badges15 bronze badges

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.

So, to fix the problem without uninstalling the plugin, add the following configuration in the .vscode/settings.json and reload your editor.

{
  "eslint.packageManager": "pnpm"
}

answered Jul 23, 2022 at 4:23

LafferyLaffery

1511 silver badge4 bronze badges

Using Next.js, TypeScript, and Tailwind CSS, I updated the .eslintrc.json file with:

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

then ctrl + shift + p and search for ESLint: Restart ESLint Server.

answered Mar 23, 2022 at 0:50

Try updating the .eslintrc.json file to

{
  "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

answered Sep 4, 2022 at 5:37

It worked for me by just adding prettier in .eslintrc file.

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

answered Aug 19, 2021 at 5:39

I had this same problem — Close the IDE and reopen it with the project folder !!

answered Jul 19, 2022 at 15:34

You can also always try updating React and then 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.

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:

npm install next@latest

yarn add next@latest

m4n0

28.6k26 gold badges74 silver badges89 bronze badges

answered Sep 30, 2021 at 16:09

Just had this issue with the Nextjs app and the following worked for me. I no longer have issue with next/babel and I can run yarn lint.

Add prettier to your project

yarn add --dev eslint-config-prettier

Update your eslint config as follows

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

Add global vscode settings and include your project path

{
  "eslint.workingDirectories": ["./your-project"]
}

answered Nov 1, 2022 at 6:30

OrgilOrgil

6717 silver badges16 bronze badges

My Problem

I found this error in project with PNPM, ESLint, and Monorepo architecture using Turborepo.

My Solution

add this into the ESLint config file:

parserOptions: {
    babelOptions: {
      presets: [require.resolve('next/babel')],
    },
  },

answered Jan 26 at 6:37

ImBIOSImBIOS

4717 silver badges21 bronze badges

In my case I had to disable VSCode ESLint extension.

Unfortunately when I added [«next/babel»] in extends, the npm run lint stopped working and Eslint in vscode did not underlining any abnormalities.

answered Aug 12, 2021 at 12:30

tomek2864tomek2864

11 silver badge1 bronze badge

ctrl + shift + p

TypeScript: Restart TS server

answered Nov 25, 2021 at 7:24

EILYAEILYA

4283 silver badges5 bronze badges

Really, just adding prettier to "extends": ["next/core-web-vitals] to have something like ==> {"extends": ["next/core-web-vitals", "prettier"]}, gets rid of the error, without having to create an extra .babelrc file. But another research that needs to be done, is to know, if there are any downsides to doing it, and i think the answer is NO

answered Feb 23, 2022 at 21:36

GodstimeGodstime

3557 silver badges13 bronze badges

In my project, i just run yarn add @babel/core and run
ctrl + shift + p in vscode, excute ESLint: Restart ESlint Server

ESLint: Restart ESlint Server

it works, and npm run lint works fine too.

> Executing task: yarn run lint <

✔ No ESLint warnings or errors

answered Feb 26, 2022 at 3:47

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. After adding "eslint.packageManager": "pnpm" for the new workspace, and reload window, than the issue’s gone.

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.

answered Apr 8, 2022 at 10:01

Источник

Parsing error: Cannot find module ‘next/babel’
Require stack:

D:appnext_appratu-seonode_modulesnextdistcompiledbabelbundle.js
D:appnext_appratu-seonode_modulesnextdistcompiledbabeleslint-parser.js
D:appnext_appratu-seonode_moduleseslint-config-nextparser.js
D:appnext_appratu-seonode_modules@eslinteslintrclibconfig-array-factory.js
D:appnext_appratu-seonode_modules@eslinteslintrclibindex.js
D:appnext_appratu-seonode_moduleseslintlibcli-enginecli-engine.js
D:appnext_appratu-seonode_moduleseslintlibcli-engineindex.js
D:appnext_appratu-seonode_moduleseslintlibapi.js
c:UsersAdmin.vscodeextensionsdbaeumer.vscode-eslint-2.1.23serverouteslintServer.js

asked Jun 28, 2021 at 12:29

mitchiri_nekomitchiri_neko

1,2612 gold badges6 silver badges11 bronze badges

Create file called .babelrc in your root directory and add this code:

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

And in .eslintrc, replace the existing code with:

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

answered Jun 30, 2021 at 11:32

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.

In addition, the currently accepted answer works for VSCode but breaks npm run lint for me.

TL;DR — see this answer which points to this blog. This fixed it for me.

Some Details

For example, if I have:

~
|  -- some_folder
|     | -- project_1
|     | -- project_2
|     ...files relating to both projects...

I’ll often just cd ~/some_folder && code .

But then I get the same error you’re experiencing. However, if I 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:

Create a workspace config
Specify folders where you need ESLint to run

You can do this easily from VSCode. The net result (following my example above) is a file named ~/some_folder/.vscode/settings.json with contents

{
    "eslint.workingDirectories": [
        "./project_1",
        "./project_2"
    ]
}

answered Aug 18, 2021 at 19:56

Craig KellyCraig Kelly

3,4062 gold badges17 silver badges17 bronze badges

Note: You don't need to create extra .babelrc 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: If you only replace with

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

The red error sign will go but the code won’t compile and gives compile error.

answered Dec 20, 2021 at 11:36

For Nextjs 12 add prettier in .eslintrc.json file inside your root folder.

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

answered Dec 3, 2021 at 16:19

MelMel

8288 silver badges15 bronze badges

So, to fix the problem without uninstalling the plugin, add the following configuration in the .vscode/settings.json and reload your editor.

{
  "eslint.packageManager": "pnpm"
}

answered Jul 23, 2022 at 4:23

LafferyLaffery

1511 silver badge4 bronze badges

Using Next.js, TypeScript, and Tailwind CSS, I updated the .eslintrc.json file with:

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

then ctrl + shift + p and search for ESLint: Restart ESLint Server.

answered Mar 23, 2022 at 0:50

Try updating the .eslintrc.json file to

{
  "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

answered Sep 4, 2022 at 5:37

It worked for me by just adding prettier in .eslintrc file.

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

answered Aug 19, 2021 at 5:39

I had this same problem — Close the IDE and reopen it with the project folder !!

answered Jul 19, 2022 at 15:34

You can also always try updating React and then 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.

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:

npm install next@latest

yarn add next@latest

m4n0

28.6k26 gold badges74 silver badges89 bronze badges

answered Sep 30, 2021 at 16:09

Just had this issue with the Nextjs app and the following worked for me. I no longer have issue with next/babel and I can run yarn lint.

Add prettier to your project

yarn add --dev eslint-config-prettier

Update your eslint config as follows

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

Add global vscode settings and include your project path

{
  "eslint.workingDirectories": ["./your-project"]
}

answered Nov 1, 2022 at 6:30

OrgilOrgil

6717 silver badges16 bronze badges

My Problem

I found this error in project with PNPM, ESLint, and Monorepo architecture using Turborepo.

My Solution

add this into the ESLint config file:

parserOptions: {
    babelOptions: {
      presets: [require.resolve('next/babel')],
    },
  },

answered Jan 26 at 6:37

ImBIOSImBIOS

4717 silver badges21 bronze badges

In my case I had to disable VSCode ESLint extension.

Unfortunately when I added [«next/babel»] in extends, the npm run lint stopped working and Eslint in vscode did not underlining any abnormalities.

answered Aug 12, 2021 at 12:30

tomek2864tomek2864

11 silver badge1 bronze badge

ctrl + shift + p

TypeScript: Restart TS server

answered Nov 25, 2021 at 7:24

EILYAEILYA

4283 silver badges5 bronze badges

answered Feb 23, 2022 at 21:36

GodstimeGodstime

3557 silver badges13 bronze badges

In my project, i just run yarn add @babel/core and run
ctrl + shift + p in vscode, excute ESLint: Restart ESlint Server

ESLint: Restart ESlint Server

it works, and npm run lint works fine too.

> Executing task: yarn run lint <

✔ No ESLint warnings or errors

answered Feb 26, 2022 at 3:47

answered Apr 8, 2022 at 10:01

Источник

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

Closed

JoseGarciaM opened this issue

Jun 15, 2021

· 14 comments

Assignees

Labels

kind: bug

Confirmed bug that is on the backlog

Comments

What version of Next.js are you using?

11.0.0

What version of Node.js are you using?

14.0.0

What browser are you using?

Safari

What operating system are you using?

macOS

How are you deploying your application?

Vercel

Describe the Bug

every file underlines imports and aslant gives me this message: Parsing error: Cannot find module ‘next/babel’

Expected Behavior

nextjs 10 didn’t show this message

To Reproduce

just import something into any file in nextjs 11

This can’t be investigated as no reproduction was provided. Please provide it.

This appears to be (for me at least) a bug related to Visual Studio where the Next.js project is a sub-project of another project and the parent project has a node_modules folder where Next is not installed. Here are steps to reproduce:

Repro

# In console:

➜  Personal> mkcdir next-babel-repro
➜  next-babel-repro> npm init
➜  next-babel-repro> npx create-next-app my-next-app
➜  next-babel-repro> cd my-next-app
➜  my-next-app git:(main)> npx next lint

# In Visual Studio
- Open the `next-babel-repro` folder
- Open the `index.js` file from `my-next-app`

The error should now be visible.

VSCode Info:

Version: 1.57.0
Commit: b4c1bd0a9b03c749ea011b06c6d2676c8091a70c
Date: 2021-06-09T17:22:31.215Z (6 days ago)
Electron: 12.0.9
Chrome: 89.0.4389.128
Node.js: 14.16.0
V8: 8.9.255.25-electron.0
OS: Darwin x64 20.1.0

Repro Repo:

https://github.com/BenjaminWFox/next11-babel-repro

Fixes/Workarounds

Open the Next.js project directly in VSCode
~ or ~
Install next in the parent project

For us it happens even in CircleCI as well with just the hello world example from Next documentation, so I don’t think it’s related to VSCode. I will provide a reproduction a bit later.

It looks like when you’re using a copy of Next that lives outside of your app it results in the above error in Next 11.0.0 if you don’t have all the devDependencies installed in your own node_modules. I’m playing around with NODE_PATH and it looks like I’m on my way to make this work, but it would be awesome if there is a way the old behaviour could be restored where the the library would use its own copy.

Our use case: we test compatibility of Datadog APM with every version of the libraries we support, so we install every version externally and then load them in multiple runs of the same test, so there is no local node_modules since there is an external one for each version. You can see what this looks like here.

Switching to Webpack 4 with webpack5: false in next.config.js also seems to resolve the issue, at least for us, although this will not be an option for Next 12.

@rochdev interesting find. We are using next in a monorepo setup. So this could actually be the reason

happens on lerna 4.0.0 + create-next-app (next 11.0.0) + Node 14 + npm 6.14 + VSCode 1.57 + macOS 10.14.5

npm i next on the parent directory fixed for me. running latest node/npm next 11.

Reproduced this issue quite quickly. Thanks for the detailed repro steps @BenjaminWFox.

For folks running into this problem in VSCode, The vscode/eslint extension runs a server on the same directory opened and it isn’t resolving dependencies for instances where the Next.js is within a subfolder. There are a few workarounds mentioned above (open the Next.js folder directly in VSCode or install next in the parent directory), but you can also set your working directory in your workspace settings. If you have a folder structure that looks like:

- parent-folder
  - next-app
  - ...

And you’ve opened parent-folder in VSCode, add the following to your workspace settings (JSON):

{
  "eslint.workingDirectories": [
    "next-app"
  ]
}

Another option to specifying each directory is to set it to auto mode to ensure that ESLint always infers to directories based on the location of package.json, .eslintignore and .eslintrc files.

{
  "eslint.workingDirectories": [
        { "mode": "auto" }
  ]
}

Note: This option may lead to unexpected results in some cases. More details here microsoft/vscode-eslint#696 (comment)

Both of these configurations worked for me, so hopefully this helps everyone running into this issue on VSCode!

@rochdev Hmm, interesting to hear that switching to webpack 4 via webpack5: false solved the issue for you although that wouldn’t necessarily apply to folks running into this problem in VSCode. Have you tried modifying working_directory within your CircleCI config to point to the folder with node_modules? I think that should solve the problem but chances are you may have tried that already 😅

I’m playing around with NODE_PATH and it looks like I’m on my way to make this work

I’ve seen multiple instances of people doing the same and it working for them. Let me know if that ends up being the solution.

I’ll close this since this is an issue specific to how tooling (VSCode, CircleCI) is resolving linting dependencies in a monorepo or Next.js-within-a-subfolder setup and directly a result of something configured wrongly within Next.js. Happy to re-open if there’s something specific we could/should be fixing however!

Have you tried modifying working_directory within your CircleCI config to point to the folder with node_modules?

Unfortunately it’s not really an option for us since it’s actually a Mocha test, so unrelated to CircleCI since Next is installed in a separate directory from the test files. It fails both locally and in CircleCI. I will admit that our use case is a bit uncommon (testing our library with multiple versions of Next), but it definitely sounds like there are many use cases and tools where this could be problematic.

I’ll close this since this is an issue specific to how tooling (VSCode, CircleCI) is resolving linting dependencies in a monorepo or Next.js-within-a-subfolder setup and directly a result of something configured wrongly within Next.js.

While it’s not necessarily an issue with Next per-se, the fact that it’s not working properly for so many people indicates to me that Next should still handle this properly, because even if the limitation is documented, it’s likely that more people will hit the issue and not everyone will find the workaround, or it may not apply for their use case (like for us).

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

vercel

locked as resolved and limited conversation to collaborators

Jan 28, 2022

Labels

kind: bug

Confirmed bug that is on the backlog

Источник

Technical Problem Cluster First Answered On
August 16, 2021

Popularity
10/10

Helpfulness
10/10