make sure both eslint and eslint-config-next are installed
Answer from Mohammad on Stack Overflowmake sure both eslint and eslint-config-next are installed
This happened to me because I somehow ended up with an extra .eslintrc.json file outside of my Next project directory which was getting picked up by my IDE (WebStorm)
For example:
parent-folder
.eslintrc.json <-- Delete this
next-folder
pages
package.json
.eslintrc.json <-- This one is correct
tsconfig.json
README.md
Resolved, after installing this package, the code will run without error:
npm i --save-dev eslint-config-next
For a misterious reason running npm audit fix --force changed my package.json from:
"eslint-config-next": "12.0.1"
to:
"eslint-config-next": "^0.2.4"
I had to change it manually and the error went away.
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.
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/*/" }
]
}
I've been struggling to find out why this happens for the last hour! These issues exist in both VS Code and Webstorm:
initialize a project with npx create-next-app, eslint, typescript and all -> the ESLint plugins for both VSCode and Webstorm works fine, shows warnings etc.
initialize a projext with npx create-next-app --use-pnpm, eslint, ts -> the ESlint plugins for both misbehave:
VSCode -> throws no warnings no matter what .tsx file I open and change stuff
Webstorm -> throws errors like "Error: Failed to load plugin 'react-hooks' declared in ' » eslint-config-next/core-web-vitals" and the ""fix"" I've found atm is to explicitly install `@next/eslint-plugin-next` as a dev dependency
Why does pnpm not love me? Is it pnpm's fault, create-next-app's fault for how it handles pnpm, or something else?
Hello,
Today I decided to try out the better version of npm, which is pnpm, but I have already some very weird issues with it, especially when installing Next.js.
Basically I run pnpm create next-app , everything works fine until I open the project and realize that I have the following error:
Error: Failed to load plugin 'react-hooks' declared in ' » eslint-config-next/core-web-vitals »
I look for solutions on the internet and I see that I have to manually install the eslint-plugin-react-hooks package. It's fixed. Wait. This time another error pops up now and it's:
Error: Failed to load plugin '@next/next' declared in ' » eslint-config-next/core-web-vitals »
So I have to do the same thing and install the next/eslint-plugin-next package.
Everything works fine now but surely this is not a normal behavior and I should not have to install every time 2 additional packages when creating a brand new default Next.js project using pnpm? I tried doing it with npm and I have 0 issues.
If you have any solutions or ideas about where it might be coming from, feel free to tell me.