Parsing error : Cannot find module 'next/babel'

Question

Update 1: Updated the latest working solution to @Jeevan Rupacha answer, please scroll below to check it out.

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:\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

Do you have a .babelrc file? And what version of Next.js are you on? — juliomalves
– juliomalves, Commented Jun 29, 2021 at 17:12
I can't find the .babelrc file. And im on Next.js v11.0.1. Is it normal that the babelrc file is missing? I generated the whole project with npx create-next-app — mitchiri_neko
– mitchiri_neko, Commented Jun 30, 2021 at 10:28

Saral Karki · Accepted Answer · 2022-01-10 04:05:44Z

513

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

edited Jan 10, 2022 at 4:05

answered Jun 30, 2021 at 11:32

Saral Karki

5,4722 gold badges10 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

16 Comments

mitchiri_neko Over a year ago

as soon as I replace the eslintrc extends, its gone! Big thanks!

David Armendariz Over a year ago

What are the possible side effects of this?

David Calhoun Over a year ago

Thanks! For some reason I got the errors even on the initial install using create-next-app. This fixes it!

Altair21 Over a year ago

I tried this but weirdly eslint just stopped working. Do you know any causes of this?

Eric Burel Over a year ago

Sounds outdated answer since SWC is now the default. I have this issue in a v13 app, very weird

|

Jeevan Rupacha · Accepted Answer · 2025-06-18 11:09:32Z

406

You don't need to create an extra .babelrc file.

In your NextJS project you have a 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 appear but the code won't compile and gives compile error.

`Note: If ["next/babel"] is not working try only ["next"]

edited Jun 18 at 11:09

answered Dec 20, 2021 at 11:36

Jeevan Rupacha

6,0163 gold badges25 silver badges43 bronze badges

7 Comments

Sovanna Over a year ago

Thx! and agreed, should be at the top. adding a .babelrc file will disable SWC in NextJS v12

ezio Over a year ago

why they have not made this the default?

23rdpro Over a year ago

You may need to restart ESLint server -> <cmd/ctrl + shift + p> then start typing Restart ESLint Server

Designly Over a year ago

Generates this error: nextjs.org/docs/messages/babel-font-loader-conflict

szabcsee Over a year ago

This is an older fix, no instead of "next/babel" should be "next"

|

Craig Kelly · Accepted Answer · 2021-09-09 20:19:23Z

156

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

edited Sep 9, 2021 at 20:19

answered Aug 18, 2021 at 19:56

Craig Kelly

4,3362 gold badges20 silver badges19 bronze badges

8 Comments

palermo Over a year ago

This fixed it for me. I had a monorepository with two different eslint configs that influenced each other. By creating the workspace config as described above the issue was gone.

Mika Over a year ago

This answer is pretty important! It fixed for me the errors. Still, the esLint config was way not enough just using next core web vitals. I ended up with these for now:

extends: ['eslint:recommended', 'plugin:import/errors', 'plugin:import/warnings', 'plugin:react/recommended', 'next/core-web-vitals','prettier' ],

Stephen Over a year ago

I had the same issue in my monorepo setup and I believe this is the actual root cause solution, thanks! We shouldn't need to add anything to .eslintrc, and we especially shouldn't need to add a .babelrc since Next.js includes next/babel preset in the app.

Ionut-Cristian Florescu Over a year ago

Had the same problem in a monorepo. Adding vscode settings.json fixed it; thanks for taking the time to share!

John Vandivier Over a year ago

seemed to work for me

|

Mel · Accepted Answer · 2021-12-03 16:19:56Z

25

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

Mel

94311 silver badges18 bronze badges

5 Comments

Ryan Killeen Over a year ago

This is the correct answer for me. Babel is not a dependency of my NextJS project, and this was a result of prettier extensions. Adding unneeded babel configs or eslint extensions referencing babel is a redherring.

Eric Burel Over a year ago

I've tried disabling the prettier extension but it did not suffice, I had to apply this fix... Still a better answer than the other since Next.js doesn't use Babel as a default anymore.

galo hernandez Over a year ago

this worked for me in latest nextjs version. Using VSCode

JuBaer AD Over a year ago

For the people who is using prettier with newly created project and get the error, this solution the best one I guess. Thanks Mel.

Mark Chantel Sep 1 at 17:26

Yes. This worked for me too. Thank you

Rakibulinux · Accepted Answer · 2023-03-31 08:39:35Z

18

For me, it's work with editing this file in NextJS 13 in app version: .eslintrc.json

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

answered Mar 31, 2023 at 8:39

Rakibulinux

1,11310 silver badges9 bronze badges

1 Comment

victor zadorozhnyy Over a year ago

That is the real solution

Avrahm Kleinholz · Accepted Answer · 2022-03-23 00:50:16Z

15

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

Avrahm Kleinholz

3472 silver badges9 bronze badges

Comments

Laffery · Accepted Answer · 2022-07-23 04:23:11Z

15

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

Laffery

1611 silver badge6 bronze badges

1 Comment

AdamQuadmon Over a year ago

unfortunately this option is deprecated, the only working solution for me was disable the plugin and just leverage on the turborepo setup

Hussam Khatib · Accepted Answer · 2021-08-19 05:39:55Z

11

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

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

answered Aug 19, 2021 at 5:39

Hussam Khatib

6808 silver badges25 bronze badges

Comments

santhosh srinivasan · Accepted Answer · 2022-09-04 05:37:54Z

10

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

santhosh srinivasan

4194 silver badges5 bronze badges

1 Comment

Lukas Over a year ago

This did it for me!

ImBIOS · Accepted Answer · 2023-08-27 06:07:19Z

9

My Problem

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

⚠️ WARNING!

UPDATE 27-8-2023: I created a new turborepo project and encountered this problem again, I found out, that implementing this solution will silently disable the entire ESLint system.

Please be careful! I recommend not using this solution anymore!

My Solution

add this into the ESLint config file:

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

edited Aug 27, 2023 at 6:07

answered Jan 26, 2023 at 6:37

ImBIOS

1,1532 gold badges16 silver badges29 bronze badges

10 Comments

Azul Over a year ago

This solved my issue as well, I have the same setup pnpm, turbo. Thanks for this!

Daniel Steigerwald Over a year ago

This disabled linting in VSCode unless I installed Next.js to the project with the eslint config.

ImBIOS Over a year ago

@DonovanDikaio I have updated the turbo examples with this fix, so anyone in the future shouldn't encounter this error.

Joe Lapp Over a year ago

I am having this problem in VSCode with the Turborepo with-tailwind example, despite the example including the above configuration -- but only within VSCode.

Aycox Over a year ago

This worked like a charm in my pnpm monorepo after trying a lot of other stuff.

|

Rishi Pollai · Accepted Answer · 2022-07-19 15:34:10Z

6

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

answered Jul 19, 2022 at 15:34

Rishi Pollai

3915 silver badges5 bronze badges

Comments

Dhammika · Accepted Answer · 2023-02-28 05:44:02Z

4

If you are using vscode and have multiple folders for your project create .vscode folder in the root of the project and create setting.json file and add following configuration.

 {
  "eslint.workingDirectories": [
   "./client",
   "./server"
   ] 
 }

Make sure to include the right folder names of your projects

answered Feb 28, 2023 at 5:44

Dhammika

814 bronze badges

1 Comment

Karma Blackshaw Over a year ago

In my case, I have a vscode workspace. ` { "folders": [ { "path": "." } ], "settings": { "eslint.workingDirectories": ["./server", "./admin"] } } `

bog · Accepted Answer · 2023-05-18 19:50:57Z

3

This is still an issue with NextJS 13.4.2. This is the best fix I've found:

{
  // You might want to additionally set this in monorepos where Next.js app is in a subdir
  "root": true,
  "extends": ["next/core-web-vitals"],
  "overrides": [
    {
      // Adapt to your needs (e.g. some might want to only override "next.config.js")
      "files": ["*.js"],
      // This is the default parser of ESLint
      "parser": "espree",
      "parserOptions": {
        "ecmaVersion": 2020
      }
    }
  ]
}

Source: Issues tab from the NextJS repo on Github.

answered May 18, 2023 at 19:50

bog

591 silver badge7 bronze badges

2 Comments

boylec1986 Over a year ago

This works for me. Tried everything. I had to use "files": [".js",".mjs"] because I'm working with modules.

Jamie Birch Over a year ago

I went with files: ["*.js", "*.jsx", "*.[c|m]js"] as the config was complaining when linting .eslintrc.cjs. I assumed it would be the same for all JS files, so added .jsx just in case.

SaimumIslam27 · Accepted Answer · 2023-08-30 16:58:25Z

3

Actually this issues happens for installing eslint and next/core-web-vitals creates conflicts with the parser, just update the eslint config for parser.

  "parser": "espree",
  "parserOptions": {
    "ecmaVersion": 2020
  }

Alternatively update the config with

  "extends": ["next"],

edited Aug 30, 2023 at 16:58

answered Aug 8, 2023 at 7:12

SaimumIslam27

1,1921 gold badge9 silver badges14 bronze badges

Comments

David · Accepted Answer · 2023-09-15 16:18:06Z

3

If your project builds fine but are only getting the Cannot find module 'next/babel' error in vscode on line 1 and your eslintrc file is not at the root level of your workspace then simply...

copy/cut and paste your eslintrc file to the root of your workspace
close vscode
reopen vscode

answered Sep 15, 2023 at 16:18

David

4,1632 gold badges25 silver badges22 bronze badges

Comments

m4n0 · Accepted Answer · 2021-10-01 09:04:14Z

1

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

or

yarn add next@latest

edited Oct 1, 2021 at 9:04

m4n0

32.6k28 gold badges81 silver badges98 bronze badges

answered Sep 30, 2021 at 16:09

VibrationPositive

4305 silver badges11 bronze badges

Comments

Gtstride · Accepted Answer · 2022-02-23 21:36:56Z

1

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

Gtstride

4359 silver badges17 bronze badges

Comments

Jude · Accepted Answer · 2022-04-08 10:01:49Z

1

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

Jude

111 bronze badge

Comments

Orgil · Accepted Answer · 2022-11-01 06:30:11Z

1

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

Orgil

7118 silver badges18 bronze badges

Comments

Stephen · Accepted Answer · 2023-05-17 18:43:59Z

Interesting we have answers for two separate issues here:

OP's issue was with Nextjs 11 where the solution was adding to the eslint config
- It's hard to say what OP's root cause was without knowing if it was a monorepo, but adding a .babelrc was certainly not the solution since Next.js includes the next/babel preset in the app by default. It may have been related to Prettier since Next.js has some suggestions about using it with eslint. Adding "prettier" to my extends did make the error go away on my end, but that wasn't the root cause in my case.
Others including me ran into the same message with Nextjs 13, this time in a monorepo setup.
- The root cause solution was as described in this answer once I set eslint.workingDirectories with each of my packages the error went away for good

tomek2864 · Accepted Answer · 2021-08-12 12:30:45Z

0

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

tomek2864

11 silver badge1 bronze badge

1 Comment

Saral Karki Over a year ago

If you disable vs code eslint extension then it wouldn't underline abnormalities

EILYA · Accepted Answer · 2021-11-25 07:24:09Z

0

ctrl + shift + p

TypeScript: Restart TS server

answered Nov 25, 2021 at 7:24

EILYA

4344 silver badges5 bronze badges

Comments

FF One M9 · Accepted Answer · 2022-02-26 14:39:25Z

0

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

edited Feb 26, 2022 at 14:39

answered Feb 26, 2022 at 3:47

FF One M9

12 bronze badges

Comments

AdamQuadmon · Accepted Answer · 2023-07-04 12:45:11Z

0

My Working Solution: uninstal vscode-eslint plugin

after longs and painfully hours struggling with this issue, trying every suggested working solution I found the only real one: remove the eslint plugin from vscode and just leverage on the turborepo configuration

answered Jul 4, 2023 at 12:45

AdamQuadmon

731 silver badge7 bronze badges

Comments

Kirk Strobeck · Accepted Answer · 2023-09-02 12:11:33Z

0

You need to install next in eslint-config-custom to make next/babel available

answered Sep 2, 2023 at 12:11

Kirk Strobeck

18.8k21 gold badges83 silver badges122 bronze badges

Collectives™ on Stack Overflow

Parsing error : Cannot find module 'next/babel'

25 Answers 25

16 Comments

7 Comments

Some Details

8 Comments

5 Comments

1 Comment

Comments

1 Comment

Comments

1 Comment

My Problem

⚠️ WARNING!

My Solution

10 Comments

Comments

1 Comment

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

My Working Solution: uninstal vscode-eslint plugin

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

25 Answers 25

16 Comments

7 Comments

Some Details

8 Comments

5 Comments

1 Comment

Comments

1 Comment

Comments

1 Comment

My Problem

⚠️ WARNING!

My Solution

10 Comments

Comments

1 Comment

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

My Working Solution: uninstal vscode-eslint plugin

Comments

Comments

Linked

Related