[BREAKING] Support ESLint v9 in plugin, config and next lint (#71218)

> [!WARNING]
> **Breaking Change:** Now uses `[email protected]` which
has a new violation disallowing Component names starting with anything
but an uppercase letter. See
https://github.com/facebook/react/releases/tag/eslint-plugin-react-hooks%405.0.0
for more details.

Adds support of ESLint v9 to `eslint-plugin-next`, `eslint-config-next`
and `next lint`.

Does not require using the new flat config format. `next lint` will
automatically ensure the old config format can be used.

### Why?

As `eslint-plugin-react-hooks` has been updated for ESLint v9 support
and is a helpful package for Next v15 upgrade, unblock the restrictions
to upgrade to ESLint v9.

Also, ESLint v8 is [End of
Life](https://eslint.org/blog/2024/09/eslint-v8-eol-version-support/#:~:text=ESLint%20v8.-,x%20end%20of%20life%20is%20October%205%2C%202024,x%20on%20October%205%2C%202024.)
support since Oct 5th, so is good to unblock v9 now.

Plugins bumped:
- [x]
[@rushstack/eslint-patch](microsoft/rushstack#4719)
([v1.10.3](https://www.npmjs.com/package/@rushstack/eslint-patch/v/1.10.3?activeTab=versions)
no release post, confirmed on NPM)
- [x]
[@typescript-eslint/eslint-plugin](typescript-eslint/typescript-eslint#9002)
([v8.0.0](typescript-eslint/typescript-eslint#9002 (comment)))
- [x]
[eslint-plugin-import](import-js/eslint-plugin-import#2996)
([v2.31.0](https://github.com/import-js/eslint-plugin-import/releases/tag/v2.31.0))
- [x]
[eslint-plugin-jsx-a11y](jsx-eslint/eslint-plugin-jsx-a11y#1009)
([v6.10.0](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/releases/tag/v6.10.0))
- [x]
[eslint-plugin-react](jsx-eslint/eslint-plugin-react#3759)
([v7.35.0](https://github.com/jsx-eslint/eslint-plugin-react/releases/tag/v7.35.0))
- [x]
[eslint-plugin-react-hooks](facebook/react#28773)
([v5.0.0](https://github.com/facebook/react/releases/tag/eslint-plugin-react-hooks%405.0.0))

We have to switch to ESLint v9 in our repo due to a pnpm bug where it
automatically uses ESLint v9 even though we only installed it via
`eslint-v9: npm:[email protected]`. This is a pnpm bug that wouldn't happen
with Yarn v1, v4 nor NPM.

Closes #64409
Closes #64114
Closes #64453

Closes NEXT-3293

---------

Co-authored-by: Sebastian "Sebbie" Silbermann <[email protected]>

Author: devjiwonchoi

.eslintignore

@@ -45,6 +45,7 @@ packages/next-swc/docs/assets/**/*
 test/lib/amp-validator-wasm.js
 test/production/pages-dir/production/fixture/amp-validator-wasm.js
 test/e2e/async-modules/amp-validator-wasm.js
+test/development/next-lint-eslint-formatter-compact/**/*.js
 
 # turbopack crates
 turbopack/crates/*/tests/**

.eslintrc.json

@@ -66,7 +66,10 @@
         "@typescript-eslint/array-type": "off",
         "@typescript-eslint/ban-ts-comment": "off",
         "@typescript-eslint/ban-tslint-comment": "off",
-        "@typescript-eslint/ban-types": "off",
+        "@typescript-eslint/no-empty-object-type": "off",
+        "@typescript-eslint/no-restricted-types": "off",
+        "@typescript-eslint/no-unsafe-function-type": "off",
+        "@typescript-eslint/no-wrapper-object-types": "off",
         "@typescript-eslint/class-literal-property-style": "off",
         "@typescript-eslint/consistent-generic-constructors": "off",
         "@typescript-eslint/consistent-indexed-object-style": "off",
@@ -77,6 +80,7 @@
         "@typescript-eslint/no-empty-interface": "off",
         "@typescript-eslint/no-explicit-any": "off",
         "@typescript-eslint/no-inferrable-types": "off",
+        "@typescript-eslint/no-require-imports": "off",
         "@typescript-eslint/no-var-requires": "off",
         "@typescript-eslint/prefer-for-of": "off",
         "@typescript-eslint/prefer-function-type": "off",
@@ -104,6 +108,7 @@
             "args": "none",
             "ignoreRestSiblings": true,
             "argsIgnorePattern": "^_",
+            "caughtErrors": "none",
             "caughtErrorsIgnorePattern": "^_",
             "destructuredArrayIgnorePattern": "^_",
             "varsIgnorePattern": "^_"
@@ -178,6 +183,7 @@
           {
             "args": "all",
             "argsIgnorePattern": "^_",
+            "caughtErrors": "none",
             "ignoreRestSiblings": true
           }
         ]
@@ -308,6 +314,7 @@
       "error",
       {
         "args": "none",
+        "caughtErrors": "none",
         "ignoreRestSiblings": true
       }
     ],

.gitignore

@@ -5,7 +5,7 @@ dist
 target
 packages/next/wasm/@next
 tarballs/
-packages/next/*.tgz
+packages/**/*.tgz
 
 # dependencies
 node_modules

.vscode/settings.json

@@ -16,6 +16,7 @@
     "typescript",
     "typescriptreact"
   ],
+  "eslint.useFlatConfig": false,
   // Set Jest runMode to on-demand as otherwise it will start running all tests the first time.
   // Equivalent to deprecated option "jest.autoRun": "off"
   "jest.runMode": "on-demand",

examples/with-supertokens/app/config/frontend.tsx

@@ -2,7 +2,7 @@ import ThirdPartyReact from "supertokens-auth-react/recipe/thirdparty";
 import EmailPasswordReact from "supertokens-auth-react/recipe/emailpassword";
 import Session from "supertokens-auth-react/recipe/session";
 import { appInfo } from "./appInfo";
-import { useRouter } from "next/navigation";
+import { type useRouter } from "next/navigation";
 import { SuperTokensConfig } from "supertokens-auth-react/lib/build/types";
 import { ThirdPartyPreBuiltUI } from "supertokens-auth-react/recipe/thirdparty/prebuiltui";
 import { EmailPasswordPreBuiltUI } from "supertokens-auth-react/recipe/emailpassword/prebuiltui";

lint-staged.config.js

@@ -1,7 +1,7 @@
 module.exports = {
   '*.{js,jsx,mjs,ts,tsx,mts}': [
     'prettier --with-node-modules --ignore-path .prettierignore --write',
-    'eslint --fix',
+    'cross-env ESLINT_USE_FLAT_CONFIG=false eslint --config .eslintrc.json --fix',
   ],
   '*.{json,md,mdx,css,html,yml,yaml,scss}': [
     'prettier --with-node-modules --ignore-path .prettierignore --write',

package.json

@@ -34,7 +34,7 @@
     "git-clean": "git clean -d -x -e node_modules -e packages -f",
     "typescript": "tsc --noEmit",
     "lint-typescript": "turbo run typescript",
-    "lint-eslint": "eslint . --ext js,jsx,ts,tsx --config .eslintrc.cli.json --no-eslintrc",
+    "lint-eslint": "cross-env ESLINT_USE_FLAT_CONFIG=false eslint . --ext js,jsx,ts,tsx --config .eslintrc.cli.json --no-eslintrc",
     "lint-ast-grep": "ast-grep scan",
     "lint-no-typescript": "run-p prettier-check lint-eslint lint-language",
     "types-and-precompiled": "run-p lint-typescript check-precompiled validate-externals-doc",
@@ -121,8 +121,8 @@
     "@types/relay-runtime": "14.1.13",
     "@types/string-hash": "1.1.1",
     "@types/trusted-types": "2.0.3",
-    "@typescript-eslint/eslint-plugin": "7.16.0",
-    "@typescript-eslint/parser": "7.16.0",
+    "@typescript-eslint/eslint-plugin": "8.0.0",
+    "@typescript-eslint/parser": "8.0.0",
     "@vercel/devlow-bench": "workspace:*",
     "@vercel/fetch": "6.1.1",
     "@vercel/og": "0.6.3",
@@ -144,15 +144,16 @@
     "dd-trace": "4.12.0",
     "es5-ext": "0.10.53",
     "escape-string-regexp": "2.0.0",
-    "eslint": "8.56.0",
+    "eslint": "9.12.0",
     "eslint-config-next": "workspace:*",
     "eslint-formatter-codeframe": "7.32.1",
     "eslint-plugin-eslint-plugin": "5.2.1",
-    "eslint-plugin-import": "2.29.1",
+    "eslint-plugin-import": "2.31.0",
     "eslint-plugin-jest": "27.6.3",
     "eslint-plugin-jsdoc": "48.0.4",
-    "eslint-plugin-react": "7.33.2",
-    "eslint-plugin-react-hooks": "4.6.0",
+    "eslint-plugin-react": "7.35.0",
+    "eslint-plugin-react-hooks": "5.0.0",
+    "eslint-v8": "npm:eslint@^8.57.0",
     "event-stream": "4.0.1",
     "execa": "2.0.3",
     "expect-type": "0.14.2",

packages/eslint-config-next/package.json

@@ -11,18 +11,18 @@
   "homepage": "https://nextjs.org/docs/app/building-your-application/configuring/eslint#eslint-config",
   "dependencies": {
     "@next/eslint-plugin-next": "15.0.0-canary.190",
-    "@rushstack/eslint-patch": "^1.3.3",
+    "@rushstack/eslint-patch": "^1.10.3",
     "@typescript-eslint/eslint-plugin": "^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0",
     "@typescript-eslint/parser": "^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0",
     "eslint-import-resolver-node": "^0.3.6",
     "eslint-import-resolver-typescript": "^3.5.2",
-    "eslint-plugin-import": "^2.28.1",
-    "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.5.0 || 5.0.0-canary-7118f5dd7-20230705"
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jsx-a11y": "^6.10.0",
+    "eslint-plugin-react": "^7.35.0",
+    "eslint-plugin-react-hooks": "^5.0.0"
   },
   "peerDependencies": {
-    "eslint": "^7.23.0 || ^8.0.0",
+    "eslint": "^7.23.0 || ^8.0.0 || ^9.0.0",
     "typescript": ">=3.3.1"
   },
   "peerDependenciesMeta": {

packages/next/src/cli/next-lint.ts

@@ -23,21 +23,23 @@ export type NextLintOptions = {
   config?: string
   dir?: string[]
   errorOnUnmatchedPattern?: boolean
-  ext: string[]
   file?: string[]
   fix?: boolean
   fixType?: string
   format?: string
   ignore: boolean
-  ignorePath?: string
-  inlineConfig: boolean
-  maxWarnings: number
   outputFile?: string
   quiet?: boolean
+  strict?: boolean
+  // TODO(jiwon): ESLint v9 unsupported options
+  // we currently delete them at `runLintCheck` when used in v9
+  ext: string[]
+  ignorePath?: string
   reportUnusedDisableDirectivesSeverity: 'error' | 'off' | 'warn'
   resolvePluginsRelativeTo?: string
   rulesdir?: string
-  strict?: boolean
+  inlineConfig: boolean
+  maxWarnings: number
 }
 
 const eslintOptions = (