eslint-plugin-react-hooks: Add support for ESLint v9

[eps1lon]

Based on #28774

Does not add support for flat configs i.e. does not adress #28313.

The PR only adds support for ESLint v9 with the old config format and sets up testing infra for separate ESLint versions. The only breaking changes that affected the plugin was around removal of context.getScope and context.getSource which have simple replacements in V9 so that we don't have to fork too much to be able to support ESLint V9 and earlier.

The last commit makes it so that we have no breaking changes. If we decide to drop support for ESLint < 9.x, we can just revert 80e7b49 (#28773)

Alternate to #28772

[react-sizebot]

Comparing: 699d03c...c1f1de3

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
oss-stable/react-dom/cjs/react-dom.production.js	=	497.71 kB	497.71 kB	=	88.93 kB	88.93 kB
oss-experimental/react-dom/cjs/react-dom.production.js	=	504.00 kB	504.00 kB	=	89.95 kB	89.95 kB
facebook-www/ReactDOM-prod.classic.js	=	591.14 kB	591.14 kB	=	103.91 kB	103.91 kB
facebook-www/ReactDOM-prod.modern.js	=	566.95 kB	566.95 kB	=	100.12 kB	100.12 kB
test_utils/ReactAllWarnings.js	Deleted	64.80 kB	0.00 kB	Deleted	16.14 kB	0.00 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
oss-stable-semver/eslint-plugin-react-hooks/cjs/eslint-plugin-react-hooks.production.js	+1.19%	76.83 kB	77.75 kB	+0.90%	14.07 kB	14.20 kB
oss-stable/eslint-plugin-react-hooks/cjs/eslint-plugin-react-hooks.production.js	+1.19%	76.83 kB	77.75 kB	+0.90%	14.07 kB	14.20 kB
oss-experimental/eslint-plugin-react-hooks/cjs/eslint-plugin-react-hooks.production.js	+1.16%	78.69 kB	79.60 kB	+0.94%	14.31 kB	14.45 kB
oss-stable-semver/eslint-plugin-react-hooks/cjs/eslint-plugin-react-hooks.development.js	+1.01%	93.66 kB	94.60 kB	+0.61%	21.96 kB	22.09 kB
oss-stable/eslint-plugin-react-hooks/cjs/eslint-plugin-react-hooks.development.js	+1.01%	93.66 kB	94.60 kB	+0.61%	21.96 kB	22.09 kB
oss-experimental/eslint-plugin-react-hooks/cjs/eslint-plugin-react-hooks.development.js	+1.00%	93.81 kB	94.75 kB	+0.61%	21.98 kB	22.12 kB
test_utils/ReactAllWarnings.js	Deleted	64.80 kB	0.00 kB	Deleted	16.14 kB	0.00 kB

Generated by 🚫 dangerJS against c1f1de3

[Debbl]

https://eslint.org/blog/2023/09/preparing-custom-rules-eslint-v9/#context-methods-becoming-properties
I noticed that this context.getSourceCode() was replaced with context.sourceCode, you might want to confirm that.

const sourceCode = context.sourceCode ?? context.getSourceCode();
const scopeManager = sourceCode.scopeManager;

[eps1lon]

getSourceCode was only deprecated.

[poteto]

Maybe split this out into a separate PR?

[eps1lon]

It kind of doesn't make sense for these change to stay if we revert ESlint v9 support. And if we need to revert the lockfile changes, we also need to revert ESLint v9 support.

Merge conflicts in yarn.lock are not an issue since you'd just run yarn. Yarn automatically resolves merge conflicts.

I rebased this PR to isolate these changes so if we do need to bisect later, we can still do it on this branch.

[poteto]

ah right, sorry I missed that there was a package.json update

[RomkeSandwave]

Any updates? Still waiting on this for our stack's ESLint 9 upgrade.

[lllapland]

So how to config/use it?

yarn add [email protected] -D

[rburgst]

when can we expect a release?

[xuhdev]

Looks like we can install 5.1.0-beta-26f2496093-20240514 for now...

[c10b10]

For who made this work:

I'm using the rc version of 5.1.0, but still getting the same error. This is my config:

import { fixupConfigRules } from "@eslint/compat";
import eslint from "@eslint/js";
import eslintImportX from "eslint-plugin-import-x";
// import eslintPluginReactHooks from "eslint-plugin-react-hooks";
import eslintReactJsxRuntime from "eslint-plugin-react/configs/jsx-runtime.js";
import eslintReactRecommended from "eslint-plugin-react/configs/recommended.js";
import globals from "globals";
import tsEslint from "typescript-eslint";
 
const typescriptReactApp = [
  { languageOptions: { globals: globals.browser } },
  eslint.configs.recommended,
  ...tsEslint.configs.recommended,
  eslintPluginReactHooks,
  ...fixupConfigRules(eslintReactRecommended),
  ...fixupConfigRules(eslintReactJsxRuntime),
  {
    rules: {
      "react/prop-types": "off",
    },
    files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"]
  },
];

Am I doing something wrong?

[EmilYanbaev]

@c10b10 My working config
"eslint-plugin-react-hooks": "5.1.0-beta-26f2496093-20240514"

import globals from 'globals'
import pluginJs from '@eslint/js'
import tseslint from 'typescript-eslint'
import pluginReact from 'eslint-plugin-react'
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
import pluginJest from 'eslint-plugin-jest'
import pluginReactHooks from 'eslint-plugin-react-hooks'

export default [
  { languageOptions: { globals: globals.browser } },
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  pluginReact.configs.flat.recommended,
  pluginJest.configs['flat/recommended'],
  eslintPluginPrettierRecommended,
  {
    files: ['src/**/*.{js,ts,jsx,tsx}'],
    plugins: {
      'react-hooks': pluginReactHooks
    },
    rules: {
      'react/react-in-jsx-scope': 'off',
      'react/prop-types': 'off',
      ...pluginReactHooks.configs.recommended.rules
    }
  },
  {
    ignores: ['dist/*']
  }
]

[eps1lon]

Released in [email protected]

[Foxeye-Rinx]

My config for my Tanstack Start project

import pluginRouter from "@tanstack/eslint-plugin-router";
import pluginReactHooks from "eslint-plugin-react-hooks";
import tseslint from "typescript-eslint";
import pluginReact from "eslint-plugin-react";
import globals from "globals";

export default [
  ...pluginRouter.configs["flat/recommended"],
  ...tseslint.configs.recommended,
  {
    files: ["**/**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}"],
    ...pluginReact.configs.flat.recommended,
    languageOptions: {
      ...pluginReact.configs.flat.recommended.languageOptions,
      globals: {
        ...globals.serviceworker,
      },
    },
  },
  {
    files: ["**/**/*.{js,ts,jsx,tsx}"],
    plugins: {
      "react-hooks": pluginReactHooks,
    },
    rules: {
      "react/react-in-jsx-scope": "off",
      "react/prop-types": "off",
      ...pluginReactHooks.configs.recommended.rules,
    },
  },
];

ESLint version: 9.12
Node version: v20.16.0

Note that the eslint-plugin-react mentioned that:

Note: Our shareable configs does not preconfigure files or languageOptions.globals. For most of the cases, you probably want to configure some properties by yourself.

So I configure the files pattern myself.
To know if the files are detected or to troubleshoot issues:

• use eslint config inspector
• And npx eslint . (from my test some TypeErrors were not detected by the inspector, that's understandable because the inspector does not really run the linter)

I added some scripts to my package.json config:

"scripts": {
   ...
   "lint": "npx eslint .",
   "eslint-inspector": "npx @eslint/config-inspector@latest"
}

You need to restart the ESLint server to make the ESLint extension work after getting things done.