7

I know there are a lot of answers like this, this or this out there and some people may flag my question as duplicate, but believe me I am struggling with this because neither of them is working for me now. Those were working before but looks like the solution is depreciated or expired.

I have no idea about eslint whatsoever, the only thing I like about eslint is that it underlines the unimported/undeclared variables with red line, that's why I installed eslint extension in my VS Code editor.

Also, I am not opening the code directory directly in my VS Code, I have other projects too in the same workspace, e.g. I have a structure like this:

|  -- some_folder
|     | -- project_1
|     | -- project_2
|     ...files relating to both projects...

Starting a fresh Next.js project should not be coming up with any errors, don't know what am I doing wrong.

This is my .eslintrc.json:

{
  "extends": "next"
}

And this is the .babelrc:

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

To tell exactly what type of solutions I already tried:

  • Adding next/babel in the .eslintrc.json
  • installing babel-eslint but nothing helped!
4
  • Did you get any further on this? I get the same error in vscode with a turborepo setup, using pnpm. I checked and my project has the next/bable folder inside the project's node-modules (i.e. the one you call project_1. Thanks
    – Magnus
    May 13, 2023 at 17:04
  • @Magnus I'm also using turborepo and got the same error. Have you fixed it?
    – dzcpy
    Jun 23, 2023 at 4:41
  • No solution guys, I added next/babel in my eslint config but it seems to stop detecting other errors too Jun 23, 2023 at 8:11
  • @dzcpy I am not experiencing the problem anymore, but do not remember what I did. Have you tried starting from one of the turborepo examples? For instance the one with tailwind. I tested it yesterday and it works well. It has eslint already set up.
    – Magnus
    Jun 23, 2023 at 15:16

4 Answers 4

16

in your .eslintrc.json file replace {"extends": "next" } with

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

2
  • 4
    It does fix the issue on the individual files but weirdly running yarn lint produces an error: "Failed to load config "next/babel" to extend from"
    – kamp
    Mar 22, 2023 at 3:46
  • This does not work for me. By adding it, eslint stops working entirely
    – dzcpy
    Jun 24, 2023 at 22:00
3

I had the same problem and I solved it by adding next/babel in the eslintrc.json file

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

another recommendation is to use only "next" like:

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

try both solutions and see if that helps

0
0

See this: Failed to load config "next/babel" to extend from eslintrc.json It's not a babel error, but instead, it has something to do with VSCode's eslint config

-1

instead of this in eslintrc.json { "extends": "next" } use this { "next/babel","next/core-web-vitals", } I think this will fix the issue.

1
  • Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
    – Community Bot
    Jan 24, 2023 at 18:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.