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

.eslintrc.json

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

.babelrc

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

If you are using typescript, make to to have this dependency installed

Then run yarn lint || npm run lint