Failed to load config "next/babel" to extend from eslintrc.json

Question

When I'm trying to build the Next.Js app then the below error is coming with a successful build. This error is showing when I deploy the app in Vercel.

error - ESLint: Failed to load config "next/babel" to extend from. Referenced from: /vercel/path0/.eslintrc.json

This is my .eslintrc.json

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

I've also added .babelrc

{
  "presets": ["next/babel"],
  "plugins": []
}

I also found a solution when I change the eslintrc.json file like below:

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

then no error is showing while building the app. But there is another problem showing when I use the above solution and the problem is:

Parsing error: Cannot find module 'next/babel'

This is shown in all the imports with red marks.

I tried to search the solution but did not found any solution for this.

Answer 1

I think, this might have to do with this weird hackfix that is being touted in a bunch of places that tells you to place next/babel in your eslint config file for some reason (e.g. here).

It probably was a hackfix for an old bug in older next.js versions. But as of (at least) summer 2022, it makes little sense to do so, considering that next/babel is a babel preset, not an eslint preset. Instead, in recent next.js versions, just reset your .eslintrc.json:

{
  "extends": [
    "next"
  ]
}

With this setup, things don't error out, as of [email protected].*.

You also might want to take a look next's eslint customization options. For example, some people might be confused why eslint is seemingly not working. In that case, consider this solution and the next.js docs on eslint.

If you have this problem, but you did not copy+paste your .eslintrc.json from the interwebz, then you might need to describe your situation in more detail.