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.

what's your package.json ? – Mr Special Jun 29 '22 at 17:40 — Mr Special, Jun 29 '22 at 17:40
I have this exact same issue. Did you figure it out? – Pongbao Aug 12 '23 at 08:19 — Pongbao, Aug 12 '23 at 08:19

Domi · Answer 1 · 2022-09-15T12:34:55.513

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 next@12.2.*.

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.

score 6 · Answer 2 · answered Jan 22 '23 at 00:56

Same Turborepo issue using pnpm. This solved it for me: https://github.com/vercel/next.js/issues/40687#issuecomment-1275184829

Essentially add this to your settings.json

// .vscode/settings.json

{
  "eslint.workingDirectories": [
    { "pattern": "apps/*/" },
    { "pattern": "packages/*/" }
  ]
}

score 5 · Answer 3 · answered Sep 21 '22 at 04:28

5

Or just replace "next" and "next/core-web-vitals" to "plugin:@next/next/recommended"

https://nextjs.org/docs/basic-features/eslint

answered Sep 21 '22 at 04:28

Sacru2red

127
1
4

score 4 · Answer 4 · answered Sep 29 '22 at 06:00

4

my problem has been solved by this code. just copy and paste it into the eslintrc.json file.

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

answered Sep 29 '22 at 06:00

Md Sajedul Islam

1,041
1
6
10

score 1 · Answer 5 · answered Mar 14 '23 at 05:25

I encountered this issue when working with TurboRepo's with-tailwind example.

Somehow ESlint was working just fine, but this error occurred. I solved it by adding next as a dev-dependency to eslint-custom-config to the package:

pnpm install next@latest -D

{
  "name": "eslint-config-custom",
  "version": "0.0.0",
  "license": "MIT",
  "main": "index.js",
  "dependencies": {
    ...
  },
  "devDependencies": {
    "next": "^13.2.4"
  },
  "publishConfig": {
    "access": "public"
  }
}

score 0 · Answer 6 · answered Dec 12 '22 at 15:34

0

I had this issue when working with TurboRepo. The solution for me was to add next as a devDependency in the root of the monorepo.

answered Dec 12 '22 at 15:34

Farzad Soltani

377
7
19

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

6 Answers6

Linked