next.jseslinteslintrcbabel-eslint

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

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:

Solution

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

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