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, eg 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

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