Parsing error : Cannot find module 'next/babel'

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

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.