Parsing error: cannot find module next/babel

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

• Tagged
• babel
• Error
• next/babel

Published August 10, 2021August 10, 2021

[

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\[email protected]\eslintrc\lib\config-array-factory.js
• D:\app\next_app\ratu-seo\[email protected]\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

,

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

,

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

,

In your NextJS Project you have this file , named .eslintrc.json,
note: You don't need to create extra .babelrc file 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.

,

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

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

,

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

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

,

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.

,

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 [email protected] [email protected]

Or using yarn:

yarn add [email protected] [email protected]

Upgrade Next.js version to latest
To upgrade you can run the following command in the terminal:

npm install [email protected]

or

yarn add [email protected]

,

ctrl + shift + p

TypeScript: Restart TS server

,

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

,

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

,

go to “.eslintrc.json” file or If you have trouble finding it, click [ctrl+p] write .eslintrc.json & press the enter key.
In this file { "extends": "next/core-web-vitals" } It will be given.
You replace & Give it
{ "extends": ["next/babel","next/core-web-vitals"] }

like this image

]