Support Next 13

[modulareverything]

Hey, very possible I'm doing this wrong, but I can't get this plugin to work with Next 13. I've never had issues with it before, but installing it and adding it to .eslintrc.json like so...

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

...doesn't seem to work like it used to

[ljosberinn]

thanks for your issue, I'll investigate, might take a couple of days however across the years

[modulareverything]

Hey, @ljosberinn no stress at all but did you have any time to look at this? Really keen to keep using this as it's my favourite 😄

[ljosberinn]

taking a look now!

[ljosberinn]

which error are you seeing specifically? not seeing any issues so far

[modulareverything]

There's every chance I'm just configuring this wrong, so apologies if that's the case...

However, I'm getting this:

Plugin "@next/next" was conflicted between ".eslintrc.json » eslint-config-galex#overrides[0]" and ".eslintrc.json » eslint-config-next/core-web-vitals » plugin:@next/next/core-web-vitals".
error Command failed with exit code 1.

The steps I took are to install the package with yarn as per the instructions in the README, and then in my eslintrc file I have this:

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

I've tried swapping the order, and removing it entirely and just keeping the galex package. If I do that, I get this error instead:

warn  - The Next.js plugin was not detected in your ESLint configuration. See https://nextjs.org/docs/basic-features/eslint#migrating-existing-config
Failed to load plugin 'etc' declared in '.eslintrc.json » eslint-config-galex#overrides[1]': Cannot find module 'eslint-plugin-etc'

Here's my package.json file in case that's helpful:

{
  "name": "@modular-everything-connect/web",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "clear && next dev",
    "build": "clear && next build",
    "start": "clear && next start",
    "lint": "clear && next lint"
  },
  "dependencies": {
    "@next/font": "13.1.1",
    "@portabletext/react": "^2.0.0",
    "@sanity/eslint-config-studio": "^2.0.1",
    "@sanity/image-url": "^1.0.1",
    "@sanity/ui": "^1.0.6",
    "@sanity/vision": "^3.0.0",
    "@types/node": "18.11.18",
    "@types/react": "18.0.26",
    "@types/react-dom": "18.0.10",
    "classnames": "^2.3.2",
    "next": "13.1.1",
    "next-sanity": "^3.1.8",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-is": "^18.2.0",
    "sanity": "^3.1.2",
    "styled-components": "^5.3.6",
    "typescript": "4.9.4"
  },
  "devDependencies": {
    "@heroicons/react": "^2.0.13",
    "autoprefixer": "^10.4.13",
    "eslint": "^8.31.0",
    "eslint-config-galex": "^4.4.0",
    "eslint-config-next": "^13.1.1",
    "postcss": "^8.4.20",
    "prettier": "^2.8.1",
    "react-is": "^18.2.0",
    "stylelint": "^14.16.0",
    "stylelint-config-idiomatic-order": "^9.0.0",
    "stylelint-config-standard": "^29.0.0",
    "stylelint-order": "^5.0.0",
    "tailwindcss": "^3.2.4"
  },
  "engines": {
    "node": ">=16"
  },
  "resolutions": {
    "@sanity/ui": "1.0.5"
  }
}

[ljosberinn]

oh this might just be because I haven't updated to latest yet and my config is trying to load a different version of @next/next while your project uses latest. will try, thanks for the package.json that'll help

[ljosberinn]

so I'm testing specifically with your package json, an empty pages folder, the tsconfig from this project and removed the clear && from scripts and.. already on eslint-config-galex@4.4.0 everything is working just fine 🤔

[ljosberinn]

seeing the same on the newly release @4.4.1 -- I'm wondering however, whats your local node version? node --version

[modulareverything]

v18.12.1

[ljosberinn]

fun..

still cant replicate. can I ask you to build a minimum reproduction?

[ljosberinn]

however, you might want to try latest 4.4.1 version first, maybe not having conflicting @next/next version might solve it already

[modulareverything]

Sorry for the delay, looking at this again today...

I've updated to the latest version (4.4.2 I think it was now) and it's sort of working. If I set my eslint file to this:

{
  "extends": ["galex"]
}

...it works!

If I include next/core-web-vitals I get the same error as before:

Plugin "@next/next" was conflicted between ".eslintrc.json » eslint-config-galex#overrides[0]" and ".eslintrc.json » eslint-config-next/core-web-vitals » plugin:@next/next/core-web-vitals".
error Command failed with exit code 1.

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

Before I would get an error regardless:

warn - The Next.js plugin was not detected in your ESLint configuration. See https://nextjs.org/docs/basic-features/eslint#migrating-existing-config
Failed to load plugin 'etc' declared in '.eslintrc.json » eslint-config-galex#overrides[1]': Cannot find module 'eslint-plugin-etc'

Whereas this seems to have fixed it now.

[ljosberinn]

cheers!

so re core-web-vitals:

• this is already included in this project, its nothing more than these -- if you want to override the marginally diverging rule values, I'd recommend creating the override yourself
• compare with createNextJsRules

it looks like, for whichever reason, you end up having two different versions of @next/next. this may be in this particular case because Next had an update a couple days ago, but no ESLint changes so I haven't released a new version on my end. So you have the latest Next version, -galex doesn't, leading to the versioning conflict.

Why it entirely breaks including both however is beyond me, especially with -plugin-etc failing because it's entirely unrelated..