Next.js / ESLint – "Parsing error: Cannot find module 'next/babel'"

Question

Every time I create a Next.js app with:

`npx create-next-app@latest`

ESLint immediately starts flashing warnings in all my .js files saying

"Parsing error: Cannot find module 'next/babel' Require stack:

• /Users//node_modules/next/dist/compiled/babel/bundle.js
• /Users//node_modules/next/dist/compiled/babel/eslint-parser.js
• /Users//node_modules/eslint-config-next/parser.js
• /Users//node_modules/@eslint/eslintrc/dist/eslintrc.cjs

Make sure that all the Babel plugins and presets you are using are defined as dependencies or devDependencies in your package.json file. It's possible that the missing plugin is loaded by a preset you are using that forgot to add the plugin to its dependencies: you can workaround this problem by explicitly adding the missing package to your top-level package.json.eslint"

I've tried reinstalling and creating new projects, cleaning cache, restarting VSCode... and nothing works.

I've found other forum threads on Stack Overflow and GitHub saying that you should add this code to your .eslintrc.json file:

{
  "extends": ["next/babel","next/core-web-vitals"]
}

However, while this "hack" removes the ESLint highlight errors, it instead causes errors at build/deployment time – or whenever you run npx eslint .. ESLint then gives this error message:

ESLint couldn't find the config "next/babel" to extend from. Please check that the name of the config is correct.

The config "next/babel" was referenced from the config file in "/Users/henrikangelstig/react-course/21-the-wild-oasis-website/my-react/.eslintrc.json".

Does anyone know of a solution that:

1. Removes the error "Parsing error: Cannot find module 'next/babel'"...
2. ...But without causing the "ESLint couldn't find the config "next/babel" to extend from" error at build/deployment or when you run npx eslint .??

Answer 1

I finally found a solution!! User paescuj on this GitHub thread suggests to add the following code to your .eslintrc.json file:

{
  "extends": ["next/core-web-vitals", "prettier"],
  "rules": {
    "no-undef": "error",
    "no-unused-vars": "warn",
    "no-unused-expressions": "warn",
    "no-extra-semi": "warn"
  },
  "overrides": [
    {
      "files": ["*.js", "*.mjs"],
      // This is the default parser of ESLint
      "parser": "espree",
      "parserOptions": {
        "ecmaVersion": "latest"
      }
    }
  ],
  // Ensures no errors that "Promise is undefined"
  "env": {
    "browser": true,
    "es6": true
  }
}

This works beautifully!

1. No errors "Parsing error: Cannot find module 'next/babel'"!!
2. No errors "ESLint couldn't find the config "next/babel" to extend from" error at build/deployment or when you run npx eslint!!

What's more, it also brought back the missing error and warning ESLint highlights that previously didn't show. Every time I tried to add my custom rules to .eslintrc.json, such as:

"rules": {
    "no-undef": "error",
    "no-unused-vars": "warn",
    "no-unused-expressions": "warn",
    "no-extra-semi": "warn"
 }

...They would just be ignored. With this code above, my rules now apply again and ESLint shows warnings and errors just as it's supposed to.

I highly recommend using this solution instead of the "hack" of:

{
  "extends": ["next/babel","next/core-web-vitals"]
}