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:
You don't need to create an extra .babelrc file.
In your NextJS project you have a 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 appear but the code won't compile and gives compile error.