eslint not working after updating eslint-config-next to v12.1.1

[iammola]

Verify canary release

• I verified that the issue exists in Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 21.4.0: Mon Feb 21 20:34:37 PST 2022; root:xnu-8020.101.4~2/RELEASE_X86_64
Binaries:
  Node: 17.8.0
  npm: 8.5.5
  Yarn: N/A
  pnpm: N/A
Relevant packages:
  next: 12.1.1
  react: 17.0.2
  react-dom: 17.0.2

What browser are you using? (if relevant)

Safari Version 15.4 (17613.1.17.1.6)

How are you deploying your application? (if relevant)

Vercel

Describe the Bug

ESLint doesn't work after updating eslint-config-next to version 12.1.1. I assume it's because you locked the dependencies #34823, but I also use the eslint-plugin-import.

Oops! Something went wrong! :(

ESLint: 8.12.0

ESLint couldn't determine the plugin "import" uniquely.

- /path-to-project/node_modules/eslint-plugin-import/lib/index.js (loaded in ".eslintrc.json » plugin:import/recommended")
- /path-to-project/node_modules/eslint-config-next/node_modules/eslint-plugin-import/lib/index.js (loaded in ".eslintrc.json » eslint-config-next/core-web-vitals » /path/node_modules/eslint-config-next/index.js")

Please remove the "plugins" setting from either config or remove either plugin installation.

If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team.

Before I realized it's from the eslint-config-next package, I removed the rules in my config files that used the import plugin then the error was

Oops! Something went wrong! :(

ESLint: 8.12.0

ESLint couldn't determine the plugin "react" uniquely.

- /path-to-project/node_modules/eslint-plugin-react/index.js (loaded in ".eslintrc.json")
- /path-to-project/node_modules/eslint-config-next/node_modules/eslint-plugin-react/index.js (loaded in ".eslintrc.json » eslint-config-next/core-web-vitals » /path-to-project/node_modules/eslint-config-next/index.js")

Please remove the "plugins" setting from either config or remove either plugin installation.

If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team.

Here is my ESLint config file

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["react", "@typescript-eslint"],
  "extends": [
    "eslint:recommended",
    "next/core-web-vitals",
    "plugin:react/recommended",
    "plugin:react/jsx-runtime",
    "plugin:import/typescript",
    "plugin:import/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking",
    "prettier"
  ],
  "env": {
    "es2021": true,
    "browser": true
  },
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module",
    "project": ["./tsconfig.json"],
    "ecmaFeatures": { "jsx": true }
  },
  "settings": {
    "react": { "version": "detect" },
    "import/resolver": { "typescript": {} }
  },
  "rules": {
    "no-else-return": "error",
    "semi": ["error", "always"],
    "no-useless-rename": "error",
    "quotes": ["error", "double"],
    "eol-last": ["error", "always"],
    "no-console": [2, { "allow": ["warn", "error"] }],
    "no-multiple-empty-lines": ["error", { "max": 1 }],
    "no-unused-expressions": ["error", { "allowShortCircuit": true, "allowTernary": true, "enforceForJSX": true }],

    "import/named": 0,
    "import/order": [
      "error",
      {
        "warnOnUnassignedImports": true,
        "newlines-between": "always",
        "groups": ["builtin", "external", "internal", "parent", ["sibling", "index"], "object", "type"]
      }
    ],

    "react/display-name": 0,
    "react/prop-types": 0,
    "react/react-in-jsx-scope": 0,
    "react/self-closing-comp": ["error", { "component": true }],

    "react-hooks/exhaustive-deps": ["warn", { "additionalHooks": "useIsomorphicLayoutEffect" }],

    "@typescript-eslint/indent": 0,
    "@typescript-eslint/no-explicit-any": 0,
    "@typescript-eslint/no-var-requires": 0,
    "@typescript-eslint/no-use-before-define": 0,
    "@typescript-eslint/member-delimiter-style": 0,
    "@typescript-eslint/explicit-function-return-type": 0,
    "@typescript-eslint/explicit-member-accessibility": 0,
    "@typescript-eslint/no-unused-vars": [2, { "argsIgnorePattern": "^_" }],
    "@typescript-eslint/array-type": ["error", { "default": "array-simple" }],
    "@typescript-eslint/no-unnecessary-boolean-literal-compare": [
      "error",
      { "allowComparingNullableBooleansToTrue": false }
    ]
  }
}

Expected Behavior

For ESLint to catch and report errors in my files

To Reproduce

• Install the ESLint packages

npm i eslint eslint-config-next eslint-plugin-import eslint-plugin-react @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-prettier

• Use the config I provided above

• Create a JS or TS file with a semicolon or quotes error

• Run ESLint

npx eslint path/to/file.ts

[wuifdesign]

having the same problem (but only the import plugin). i think it happens because they pinned a specific version in 12.1.1.

12.1.0:

next.js/packages/eslint-config-next/package.json

Line 17 in 8545fd1

"eslint-plugin-import": "^2.25.2",

12.1.1:

next.js/packages/eslint-config-next/package.json

Line 17 in b82f546

"eslint-plugin-import": "2.25.2",

and another config i use uses "eslint-plugin-import": "^2.25.3". Which means there are 2 different versions of the plugin and it failes.

i fixed it for now by using following in the package.json (you may also add the eslint-plugin-react)

{
  "overrides": {
    "eslint-plugin-import": "^2.25.3"
  }
}

maybe nextjs should revert their change back to ^2.5.2 to support current version as most other packages. for now i will keep the override.

[iammola]

I fixed mine by reverting to eslint-config-next@12.1.0

[tal-rofe]

Having error with StaticImage type as well

[huozhi]

@tal-rofe would like to elobrate the problem or maybe file another issue for that? wanna to make sure if there some details we might miss, thank you

[tal-rofe]

@huozhi
So renovate tried to upgrade the following versions:

Then fortunately my Github Actions alerts these upgrades would break my code.

So I started investigating why it happened, by upgrading manually both packages to 12.1.1. I've observed that the root cause it next upgrade. eslint-config-next upgrade does not break the code, at least for me.

After manually upgrade next to 12.1.1 I got the following error:

I do have the following file:

And of course it works fine w/o upgrading.

[wuifdesign]

@huozhi So renovate tried to upgrade the following versions:

Then fortunately my Github Actions alerts these upgrades would break my code.

So I started investigating why it happened, by upgrading manually both packages to 12.1.1. I've observed that the root cause it next upgrade. eslint-config-next upgrade does not break the code, at least for me.

After manually upgrade next to 12.1.1 I got the following error:

I do have the following file:

And of course it works fine w/o upgrading.

is don't think this has anything to do with this issue. this should be a separate issue.
Try not to throw other bugs into random issues. this will make hard to track them and dosn't help to solve the initial issue. @tal-rofe

[TomFreudenberg]

Same to me.

I updated all packages for nextjs@12.1.1 last night but the package eslint-config-next@12.1.1 does not work.

eslint-config-next@12.1.0 does still work with the attached config!

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": [
    "next/core-web-vitals",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:storybook/recommended",
    "airbnb",
    "prettier"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": [
    "@typescript-eslint",
    "mui-unused-classes",
    "react",
    "prettier",
    "import"
  ],
  "ignorePatterns": [
    "node_modules/**"
  ],
  "rules": {
    "prettier/prettier": "error",
    "no-unused-vars": "warn",
    "no-undef": "off",
    "no-console": "off",
    "no-underscore-dangle": "off",
    "no-nested-ternary": "off",
    "func-names": "off",
    "no-process-exit": "off",
    "object-shorthand": "off",
    "class-methods-use-this": "off",
    "no-use-before-define": "off",
    "@typescript-eslint/no-use-before-define": "off",
    "no-param-reassign": ["error", { "props": false }],
    "react/react-in-jsx-scope": "off",
    "react/jsx-filename-extension": [
      1,
      {
        "extensions": [
          ".jsx",
          ".tsx"
        ]
      }
    ],
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "@typescript-eslint/explicit-function-return-type": "off",
    "import/no-unresolved": "off",
    "import/extensions": "off"
  },
  "overrides": [
    {
      "files": [
        "*.js",
        "*.jsx"
      ]
    },
    {
      "files": [
        "*.ts",
        "*.tsx"
      ],
      "rules": {
        // explicit should be "error"
        "@typescript-eslint/explicit-module-boundary-types": "off",
        "@typescript-eslint/explicit-function-return-type": "off"
      }
    }
  ],
  "settings": {
    "import/resolver": null
  }
}

[rjoonas]

Same problem here, eslint-config-next/core-web-vitals conflicts with plugin:import/recommended on 12.1.1. Staying in 12.1.0 for now.

[ijjk]

Hi, this has been fixed in the latest version of Next.js v12.1.2 please update and give it a try!

[TomFreudenberg]

For me update to 12.1.2 does work again

Thanks

[robertwbradford]

We are now seeing this problem, but it looks like the v12.1.2 update does not address our setup. We have moved our ESLint config (among other development configs) to a library our team publishes (similar to react-scripts). A consumer of this "scripts" library has this in their package.json:

{
    "scripts": {
      "lint": "our-scripts lint",
    },
    "devDependencies": {
      "@ourstuff/our-scripts": "^9.3.0",
      // projects do not install any eslint libraries directly
    },
    "eslintConfig": {
      "extends": "./node_modules/@ourstuff/our-scripts/lib/config/eslintrc.js"
    },
}

The @ourstuff/our-scripts library brings in the following (among others):

{
  "dependencies": {
    "eslint": "^8.9.0",
    "eslint-config-next": "^12.1.0",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-react": "^7.28.0",
    "eslint-plugin-react-hooks": "^4.3.0",
  },
}

It appears the recent v12.1.2 update does not recognize config provided through package.json. As this is a valid method for providing configuration, is there a way have Next also pick this up when de-duping?

[tm1000]

This is still broken because of #34823

@robertwbradford you should have your team change dependencies to peerDependencies. Then just rely on next's dependencies.

[wuifdesign]

@ijjk thx for trying to fix it. but please reopen as the issue isnt fixed. i'm using a setup like @robertwbradford and the fix dosn't work for me either.

[ijjk]

@wuifdesign can you provide a link to a repo with a minimal reproduction where you are seeing this not working with the latest version? The initial reproduction is working and is added as a test case here https://github.com/vercel/next.js/blob/canary/test/production/eslint-plugin-deps/index.test.ts

[wuifdesign]

@ijjk sure i can. i use a separate repo for my eslint config. i think it is the same setup as robertwbradford used.

i made a quick example with minimal setup:
https://github.com/wuifdesign/nextjs-eslint-bug

just try to run npm run lint and you will get the following error: Plugin "import" was conflicted between ".eslintrc.json » eslint-config-next" and ".eslintrc.json » eslint-config-wuif » eslint-config-react-app".

[robertwbradford]

This is still broken because of #34823

@robertwbradford you should have your team change dependencies to peerDependencies. Then just rely on next's dependencies.

@tm1000 Thanks for the reply. We had considered something like this but had a couple other considerations preventing this:

• Our "scripts" library is also used in non-Next.js JavaScript projects, so its consumers may or may not have next installed.
• Our team has tried hard to only stick with public APIs so as not to rely on implementation details, and we were uncertain whether the list of plugins from https://nextjs.org/docs/basic-features/eslint#eslint-config and https://nextjs.org/docs/basic-features/eslint#recommended-plugin-ruleset could be interpreted as Next's public API. Our lint script relies on the "react", "jsx-a11y", and "react-hooks" plugins specifically, so if a subsequent Next release changed any of these libraries as part of its lint feature implementation details, we'd break. If those specific plugins are officially part of Next's public API for linting and would be protected under a semantic versioning, then we can rely on them. @ijjk are you able to confirm one way or the other?

We also have stylelint as part of our "script" library lint script.

Not sure what to do at this point. I was able to see the same error from wulfdesign's latest comment.

[tm1000]

• Our "scripts" library is also used in non-Next.js JavaScript projects, so its consumers may or may not have next installed.

Yes my team does the same thing. Keeping them as PeerDeps doesn't cause issues there and in newer versions of npm it will auto install PeerDeps anyways (if they dont exist somewhere else). In our eslint library we dont have next as a plugin.

We also have stylelint as part of our "script" library lint script.

We also have prettier in ours and doing it this way doesn't cause an issue.

There's still an issue though. Not negating that, as we had to remove the conflicting next eslint plugins from our root package.json in our nextjs project. @wuifdesign is a good demo of this

[wuifdesign]

any updates on this? or should i open a new issue?

[daviddelusenet]

Any update on when this is being fixed?

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.