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

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 https://github.com/vercel/next.js/pull/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.

{
  "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