3

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!
Jonas
  • 121,568
  • 97
  • 310
  • 388
Tayyab Ferozi
  • 464
  • 1
  • 6
  • 20
  • 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 '23 at 17:04
  • @Magnus I'm also using turborepo and got the same error. Have you fixed it? – dzcpy Jun 23 '23 at 04:41
  • No solution guys, I added next/babel in my eslint config but it seems to stop detecting other errors too – Tayyab Ferozi Jun 23 '23 at 08: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 '23 at 15:16

3 Answers3

8

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

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

Mahendra Bishnoi
  • 97
  • 1
  • 4
  • 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 '23 at 03:46
  • This does not work for me. By adding it, eslint stops working entirely – dzcpy Jun 24 '23 at 22:00
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

dzcpy
  • 129
  • 5
-1

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

MD. AMINUL ISLAM
  • 19
  • 2
  • 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](/help/how-to-answer). – Community Jan 24 '23 at 18:06