CODEWITHSUNDEEP
next.jsbabeljseslintverceleslintrc
DCodeMania
DCodeMania

Reputation: 1157

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

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.

Upvotes: 37

Views: 37393

Answers (7)

Enes Kirimi
Enes Kirimi

Reputation: 458

I was getting this error when my project was not at the root of the repo, alongside other type issues coming from typescript. Moving everything to the root level have resolved it.

Upvotes: 0

Paul
Paul

Reputation: 19

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

Upvotes: 1

wongx
wongx

Reputation: 11869

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

Upvotes: 10

Farzad Soltani
Farzad Soltani

Reputation: 505

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.

Upvotes: 0

Md Sajedul Islam
Md Sajedul Islam

Reputation: 2871

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

Upvotes: 5

Sacru2red
Sacru2red

Reputation: 64

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

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

Upvotes: 6

Domi
Domi

Reputation: 24508

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.

Upvotes: 45

Related Questions