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, Jun 29 '21 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, Jun 30 '21 at 10:28

Saral Karki · Answer 1 · 2022-01-10T04:05:44.730

419

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 '22 at 04:05

answered Jun 30 '21 at 11:32

Saral Karki

4,530
2
7
10

57

as soon as I replace the eslintrc extends, its gone! Big thanks! – mitchiri_neko Jun 30 '21 at 11:57
5

What are the possible side effects of this? – davidaap Jul 07 '21 at 00:45
This really helped. – Sunil Shah Aug 17 '21 at 03:47
@SaralKarki Can you explain what this does? – DonCarleone Aug 17 '21 at 15:11
2

@DonCarleone read this doc https://nextjs.org/docs/advanced-features/customizing-babel-config – Saral Karki Aug 17 '21 at 15:17
4

Thanks! For some reason I got the errors even on the initial install using create-next-app. This fixes it! – David Calhoun Sep 24 '21 at 14:47
5

I tried this but weirdly eslint just stopped working. Do you know any causes of this? – Altair21 Dec 07 '21 at 17:22
I ended up switching back to `"extends": ["next", "next/core-web-vitals", "prettier"],` and then used `ctrl + shift + p` to `ESLint: Restart ESLint Server`. – Rob Sawyer Apr 06 '22 at 12:50
1

Where do you get this from? There is no such thing as an eslint `next/babel` configuration - maybe there was in the past? Are you confusing `babel` configuration with `eslint` configuration? If you find that this answer causes more problems than it solves, consider [this answer](https://stackoverflow.com/a/72837984/2228771) instead. – Domi Jul 02 '22 at 09:34
Also had to call "ESLint: Restart ESLint Server" afterwards, bet then it worked! – H. Evers Aug 12 '22 at 08:55
2

Sounds outdated answer since SWC is now the default. I have this issue in a v13 app, very weird – Eric Burel Oct 31 '22 at 10:29
@EricBurel Same here. Any updates? – Lars Flieger Feb 14 '23 at 19:29
People need to know that creating a `.babelrc` [opts you out of using swc to transpile your code](https://nextjs.org/docs/architecture/nextjs-compiler#unsupported-features). That means your builds will be slower and if you care about minimizing your pipeline minutes (saving money), then you should avoid doing this. – heez Aug 24 '23 at 19:34

Jeevan Rupacha · Accepted Answer · 2023-01-16T05:03:41.180

213

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.

edited Jan 16 '23 at 05:03

answered Dec 20 '21 at 11:36

Jeevan Rupacha

3,055
1
15
29

1

Thanks it worked. – Swaroop Maddu Dec 21 '21 at 06:16
You are welcome .@MadduSwaroop – Jeevan Rupacha Dec 21 '21 at 11:14
10

Should be at the top, this is latest working solution. – Brendan Sluke Dec 29 '21 at 14:51
7

Thx! and agreed, should be at the top. adding a .babelrc file will disable SWC in NextJS v12 – Sovanna May 26 '22 at 15:43
2

Works like a charm! This is the simplest solution that fixes the problem. – MrIveck Oct 29 '22 at 07:40
perfect, helps me a lot – Tom Fan Jun 03 '23 at 02:49
Thanks dude, the error disappeared as soon as I applied the solution – Parham Abolghasemi Jul 02 '23 at 05:14
why they have not made this the default? – ezio Aug 30 '23 at 08:19

Craig Kelly · Answer 3 · 2021-09-09T20:19:23.743

130

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 09 '21 at 20:19

answered Aug 18 '21 at 19:56

Craig Kelly

3,776
2
18
17

7

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. – palermo Aug 25 '21 at 06:01
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' ],` – Mika Feb 17 '23 at 15:17
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. – Steve May 17 '23 at 18:32
Had the same problem in a monorepo. Adding vscode `settings.json` fixed it; thanks for taking the time to share! – Ionut-Cristian Florescu Jul 31 '23 at 17:09
seemed to work for me – John Vandivier Aug 20 '23 at 00:36

score 19 · Answer 4 · answered Dec 03 '21 at 16:19

19

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

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

answered Dec 03 '21 at 16:19

Mel

858
8
15

1

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. – Ryan Killeen Aug 07 '22 at 19:45
1

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. – Eric Burel Oct 31 '22 at 10:31

score 15 · Answer 5 · answered Jul 23 '22 at 04:23

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 '22 at 04:23

Laffery

151
1
4

unfortunately this option is deprecated, the only working solution for me was disable the plugin and just leverage on the turborepo setup – AdamQuadmon Jul 04 '23 at 12:43

score 12 · Answer 6 · answered Mar 23 '22 at 00:50

12

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 '22 at 00:50

Avrahm Kleinholz

199
1
9

score 9 · Answer 7 · answered Aug 19 '21 at 05:39

9

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

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

answered Aug 19 '21 at 05:39

Hussam Khatib

600
6
17

score 8 · Answer 8 · answered Mar 31 '23 at 08:39

8

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 '23 at 08:39

Rakibulinux

451
5
4

score 7 · Answer 9 · answered Sep 04 '22 at 05:37

7

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 04 '22 at 05:37

santhosh srinivasan

289
3
4

This did it for me! – Lukas Dec 08 '22 at 10:43

score 6 · Answer 10 · answered Jul 19 '22 at 15:34

6

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

answered Jul 19 '22 at 15:34

Rishi Pollai

301
4
4

ImBIOS · Answer 11 · 2023-08-27T06:07:19.637

6

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 '23 at 06:07

answered Jan 26 '23 at 06:37

ImBIOS

630
1
9
24

This solved my issue as well, I have the same setup pnpm, turbo. Thanks for this! – Azul Jan 29 '23 at 07:04
1

This disabled linting in VSCode unless I installed Next.js to the project with the eslint config. – Daniel Steigerwald Jan 31 '23 at 14:02
1

@DonovanDikaio I have updated the turbo examples with this fix, so anyone in the future shouldn't encounter this error. – ImBIOS Feb 01 '23 at 10:48
I am having this problem in VSCode with the Turborepo with-tailwind example, despite the example including the above configuration -- but only within VSCode. – Joe Lapp Feb 17 '23 at 18:38
This worked like a charm in my pnpm monorepo after trying a lot of other stuff. – Aycox Feb 21 '23 at 10:50
@Aycox consider vote up when it's good for you, to help other find this solution. – ImBIOS Feb 24 '23 at 08:44
worked like a charm. how did yo arrived to the solution? – elpddev Apr 09 '23 at 19:18
@elpddev Because I'm an active vercel open source contributor, It's normal to know what's happen behind in the background. – ImBIOS Apr 10 '23 at 01:37
@ImBIOS thank you. I wanted to know why babeloptions works when the default parser is not babel. Ive looked in eslint docs but could not find a reference. All i understood that parseroptions are given as is to a custom parser if it defined. – elpddev Apr 11 '23 at 08:12
I'm not debugging it further, but I guess it's because of just a resolution error. In a normal monolith project, it can find the next/babel inside root node_modules. But, in turborepo monorepo, it requires a workaround to find it. So, we just resolve this thing with this resolution override to tell where the next/babel is. – ImBIOS Apr 11 '23 at 10:13

score 2 · Answer 12 · answered Feb 28 '23 at 05:44

2

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 '23 at 05:44

Dhammika

61
4

In my case, I have a vscode workspace. ` { "folders": [ { "path": "." } ], "settings": { "eslint.workingDirectories": ["./server", "./admin"] } } ` – Karma Blackshaw Mar 17 '23 at 08:02

score 2 · Answer 13 · answered May 18 '23 at 19:50

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.

This works for me. Tried everything. I had to use "files": ["*.js","*.mjs"] because I'm working with modules. — boylec1986, May 23 '23 at 21:13

score 1 · Answer 14 · edited Oct 01 '21 at 09:04

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

score 1 · Answer 15 · answered Nov 01 '22 at 06:30

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

score 0 · Answer 16 · answered Aug 12 '21 at 12:30

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 '21 at 12:30

tomek2864

1
1
1

1

If you disable vs code eslint extension then it wouldn't underline abnormalities – Saral Karki Aug 15 '21 at 03:05

score 0 · Answer 17 · answered Nov 25 '21 at 07:24

0

ctrl + shift + p

TypeScript: Restart TS server

answered Nov 25 '21 at 07:24

EILYA

358
4
5

score 0 · Answer 18 · answered Feb 23 '22 at 21:36

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

黄名超 · Answer 19 · 2022-02-26T14:39:25.280

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 '22 at 14:39

answered Feb 26 '22 at 03:47

黄名超

1
2

score 0 · Answer 20 · answered Apr 08 '22 at 10:01

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.

score 0 · Answer 21 · answered May 17 '23 at 18:43

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

score 0 · Answer 22 · answered Jul 04 '23 at 12:45

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

SaimumIslam27 · Answer 23 · 2023-08-30T16:58:25.797

0

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 '23 at 16:58

answered Aug 08 '23 at 07:12

SaimumIslam27

971
1
8
14

score 0 · Answer 24 · answered Sep 02 '23 at 12:10

0

You need to install next in eslint-config-custom

answered Sep 02 '23 at 12:10

Kirk Strobeck

17,984
20
75
114

score 0 · Answer 25 · answered Sep 02 '23 at 12:11

0

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

answered Sep 02 '23 at 12:11