121

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
3
  • Do you have a .babelrc file? And what version of Next.js are you on? Jun 29, 2021 at 17:12
  • 2
    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 Jun 30, 2021 at 10:28
  • @mitchiri_neko Yes, next uses swc to compile. Feb 14 at 19:22

19 Answers 19

365

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"]
}
12
  • 44
    as soon as I replace the eslintrc extends, its gone! Big thanks! Jun 30, 2021 at 11:57
  • 5
    What are the possible side effects of this?
    – davidaap
    Jul 7, 2021 at 0:45
  • 2
    @DonCarleone read this doc nextjs.org/docs/advanced-features/customizing-babel-config Aug 17, 2021 at 15:17
  • 4
    Thanks! For some reason I got the errors even on the initial install using create-next-app. This fixes it! Sep 24, 2021 at 14:47
  • 5
    I tried this but weirdly eslint just stopped working. Do you know any causes of this?
    – Altair21
    Dec 7, 2021 at 17:22
113

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"
    ]
}
2
  • 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, 2021 at 6: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 at 15:17
108

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.

6
  • 1
    Thanks it worked. Dec 21, 2021 at 6:16
  • 6
    Should be at the top, this is latest working solution. Dec 29, 2021 at 14:51
  • 5
    Thx! and agreed, should be at the top. adding a .babelrc file will disable SWC in NextJS v12
    – Sovanna
    May 26, 2022 at 15:43
  • 1
    Thank you. This worked as detailed.
    – ssedwards
    Aug 1, 2022 at 11:43
  • 2
    Works like a charm! This is the simplest solution that fixes the problem.
    – MrIveck
    Oct 29, 2022 at 7:40
18

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

{
  "extends": ["next/core-web-vitals", "prettier"]
}
2
  • 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. Aug 7, 2022 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, 2022 at 10:31
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"
}
0
8

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.

7

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

{
  "extends": ["next", "prettier"]
}
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

1
  • This did it for me!
    – Lukas
    Dec 8, 2022 at 10:43
6

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

4

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')],
    },
  },
6
  • This solved my issue as well, I have the same setup pnpm, turbo. Thanks for this! Jan 29 at 7:04
  • This disabled linting in VSCode unless I installed Next.js to the project with the eslint config. Jan 31 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 1 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 at 18:38
  • This worked like a charm in my pnpm monorepo after trying a lot of other stuff.
    – Aycox
    Feb 21 at 10:50
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
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"]
}
1

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

1
  • In my case, I have a vscode workspace. ` { "folders": [ { "path": "." } ], "settings": { "eslint.workingDirectories": ["./server", "./admin"] } } ` Mar 17 at 8:02
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.

1
  • 1
    If you disable vs code eslint extension then it wouldn't underline abnormalities Aug 15, 2021 at 3:05
0

ctrl + shift + p

TypeScript: Restart TS server

0

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

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
0

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.

0

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

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.