Parsing error : Cannot find module 'next/babel'

Question

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:

• 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\node_modules@eslint\eslintrc\lib\config-array-factory.js
• D:\app\next_app\ratu-seo\node_modules@eslint\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

Answer 1

Note: You don't need to create extra .babelrc file

In your NextJS Project you have this 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 go but the code won't compile and gives compile error.