next.jsbabeljs

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

Solution

  • 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.