Parsing error: Cannot find module 'next/babel' in my Next.js app

Question

I know there are a lot of answers like this, this or this out there and some people may flag my question as duplicate, but believe me I am struggling with this because neither of them is working for me now. Those were working before but looks like the solution is depreciated or expired.

I have no idea about eslint whatsoever, the only thing I like about eslint is that it underlines the unimported/undeclared variables with red line, that's why I installed eslint extension in my VS Code editor.

Also, I am not opening the code directory directly in my VS Code, I have other projects too in the same workspace, e.g. I have a structure like this:

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

Starting a fresh Next.js project should not be coming up with any errors, don't know what am I doing wrong.

This is my .eslintrc.json:

{
  "extends": "next"
}

And this is the .babelrc:

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

To tell exactly what type of solutions I already tried:

• Adding next/babel in the .eslintrc.json
• installing babel-eslint but nothing helped!

Answer 1

in your .eslintrc.json file replace {"extends": "next" } with

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

Answer 2

instead of this in eslintrc.json { "extends": "next" } use this { "next/babel","next/core-web-vitals", } I think this will fix the issue.

Answer 3

See this: Failed to load config "next/babel" to extend from eslintrc.json It's not a babel error, but instead, it has something to do with VSCode's eslint config

Answer 4

I had the same problem and I solved it by adding next/babel in the eslintrc.json file

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

another recommendation is to use only "next" like:

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

try both solutions and see if that helps