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

This error has nothing to do with ESLint, nor with your .eslintrc.json file - and everything to do with VS Code's open workspace. It's why only some people get the ESLint warning while others don't. On this note, I also wouldn't tamper with Nextjs' "preferences" by overriding parser settings within the .eslintrc.json file. However, I do provide a simple (last resort option) to modify the .eslintrc.json file near the end of my answer.

Understanding the Root Cause

This "parsing error" is really more of a superficial nature due to a conflict between Nextjs' way of doing things versus how VS Code's open workspace resolves ESLinting libraries. Once upon a time, Nextjs made a change to fix an issue with canary. In turn, this change (re)introduced the Babel parsing error to VS Code users. Nextjs has code that is not directly visible to ESLint in regards to how it sets customizations to Babel.

Here are three different solutions to tackle this issue:

Option 1: Just Open Your Project Folder Directly in VS Code

If your next-application-name folder is directly opened (and treated as a top level directory in VS Code), you shouldn't see the error anymore. That's because VS Code's open workspace will resolve the ESLinting libraries to just the files contained within your opened folder. Consider the following:

MyProjectsCombined (top level folder)

• FirstNextApp (sub-folder)
• SecondNextApp (sub-folder)
• ThirdNextApp (sub-folder)

Open up VS Code, go to File -> Open Folder -> Your-Next-App and see if you get the error again in your next.config.mjs file.

Option 2: Add Your Project Sub Folder to your Top-Level Folder's Workspace

If you intend to swap around multiple project folders (I certainly do) within VS Code, then add your nextjs application folder as a "workspace" to the top level directory folder.

1. In VS Code, click on your current nextjs project folder name inside the explorer menu. Go to File -> Add Folder to Workspace.

2. You should see a new file appear in the root directory of your nextjs project folder(ie: MyProjectsCombined.code-workspace).

3. Edit that file to make it look like this:

   { "folders": [ { "path": ".." } ], "settings": { "eslint.workingDirectories": [ { "mode": "auto" } ] } }

This will allow your ESLint libraries to properly resolve within your "workspace".

Option 3: Lazy/Quick .eslintrc.json Modification: If you don't want to use a specific workspace, you can go into your .eslintrc.json file and add the following

  "ignorePatterns": [
    "next.config.mjs"
  ]

This simply will ignore the eslint warning you see in the next.config.mjs file, and you can continue on with your life as if nothing ever happened. The downside to this is if you have further modifications within this file, you won't be able to lint them.

Technically, you can also achieve something similar using overrides like this:

  "overrides": [
    {
      "files": ["*.js", "*.jsx", "*.tsx"]
    }
  ],

But I am really not a fan of imposing such hard limits on file-types for the sake of just one file (next.config.mjs). I would only use overrides if I have a pressing need to apply different rules to different filetypes. And something like that adds a huge layer of complexity and less flexibility, in my opinion.

My complete .eslintrc.json file:

In case you're curious, this is how I use my eslint file

{
  "root": true,
  "extends": [
    "next/core-web-vitals",
    "prettier",
    "plugin:jsx-a11y/recommended",
    "plugin:prettier/recommended"
  ],
  "rules": {
    "no-undef": "error",
    "no-unused-vars": "warn",
    "no-unused-expressions": "warn",
    "no-extra-semi": "warn",
    "prettier/prettier": ["error"]
  },
  "ignorePatterns": [
    "node_modules/",
    ".next/",
    "out/",
    "public/",
    "dist/",
    "build/"
  ]
}

Answer 2

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"]
}