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:


Solution

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