Bug: eslint-plugin-react-hooks v.6.1.0 recommended config uses array instead of object

[anthonyblond]

Not sure if this is technically a bug, or just a convention choice.

It's not possible to use the recommended config directly in a flat eslint config array in version 6.1.0

The recommended-latest config (now deprecated) will work, but the new recommended config will not.

The plugin is defined as:

Object.assign(plugin.configs, {
    'recommended-legacy': {
        plugins: ['react-hooks'],
        rules: ruleConfigs,
    },
    'flat/recommended': [
        {
            plugins: {
                'react-hooks': plugin,
            },
            rules: ruleConfigs,
        },
    ],
    'recommended-latest': [
        {
            plugins: {
                'react-hooks': plugin,
            },
            rules: ruleConfigs,
        },
    ],
    recommended: {
        plugins: ['react-hooks'],
        rules: ruleConfigs,
    },
});

The last property should be

    recommended: {
         plugins: {
             'react-hooks': plugin,
         },
        rules: ruleConfigs,
    },

as per https://eslint.org/docs/latest/use/configure/configuration-files#configuration-objects which states

plugins - An object containing a name-value mapping of plugin names to plugin objects. When files is specified, these plugins are only available to the matching files.

React version: 19.1.1

Steps To Reproduce

// eslint.config.js
import jsEslint from '@eslint/js';
import reactHooks from 'eslint-plugin-react-hooks';
import { defineConfig } from 'eslint/config';

export default defineConfig([
  jsEslint.configs.recommended, 
  reactHooks.configs.recommended
]);

The current behaviour

Running eslint

Oops! Something went wrong! :(

ESLint: 9.36.0


A config object has a "plugins" key defined as an array of strings. It looks something like this:

    {
        "plugins": ["react-hooks"]
    }

Flat config requires "plugins" to be an object, like this:

    {
        plugins: {
            react-hooks: pluginObject
        }
    }

Please see the following page for information on how to convert your config object into the correct format:
https://eslint.org/docs/latest/use/configure/migration-guide#importing-plugins-and-custom-parsers

If you're using a shareable config that you cannot rewrite in flat config format, then use the compatibility utility:
https://eslint.org/docs/latest/use/configure/migration-guide#using-eslintrc-configs-in-flat-config

The expected behaviour

For it to work the same as if using reactHooks.configs['recommended-latest'] instead.

This isn't a huge deal since there are only two rules, so its easy to just skip the recommended config like the following, but it would nice to be consistent with the way other eslint plugins share their configs.

  {
    plugins: {
      'react-hooks': reactHooksPlugin,
    },
    rules: {
      'react-hooks/exhaustive-deps': 'error',
      'react-hooks/rules-of-hooks': 'error',
    },
  },

[cpojer]

Yup I also just ran into this, had to go back to 'react-hooks': reactHooks.

[josephsavona]

Thanks for reporting. I experimented with a bunch of ways to define the plugin, looking at the ESLint docs and examples and trying things out to make sure they worked. Iirc I tried defining it as you suggest and ran into issues when trying to install the plugin, but we’ll definitely take another look!

[josephsavona]

Note that ESLint docs say that in v9, if you specify “recommended” in your config that it will choose “flat/recommended” if available. We define that too, as you suggest, and left “recommended” in a way that’s backwards compatible w ESLint v8. Is that upgrade to flat config not happening? Are you using the defineConfig() helper?

[cpojer]

@josephsavona Could you copy what eslint-plugin-react does? It exports react.configs.flat.recommended. See nkzw-tech/eslint-config@c388e7f where I had to fix up the setup of eslint-plugin-react-hooks when upgrading to 6.1.0.

Probably a different discussion, but it would be great to just take over eslint-plugin-react, deprecate/remove some of the silly rules it has, and then merge the hooks plugin into that one. There is really no reason to have more than one ESLint plugin for React.

[anthonyblond]

@josephsavona Happens with defineConfig too.

I see. I didn't realise the intention was for recommended to be backwards compatible, and to use flat/recommended. That makes sense. I'll just do that.

As an aside I'm actually using this in typescript and doing

import reactHooksPlugin from 'eslint-plugin-react-hooks';
...
reactHooksPlugin.configs['flat/recommended'],
...

results in a tsc error saying it doesn't have a .config property. Looking at the package's declaration files its not clear why it thinks it doesn't. Not really relevant to this and easily ignored though :)

[brijeshb42]

It also has typescript issue where I cannot access reactHooksPlugin.configs.recommended with error Property 'configs' does not exist on reactHooksPlugin where reactHooksPlugin is imported as -

import reactHooksPlugin from 'eslint-plugin-react-hooks';

[manferlo81]

It also has typescript issue where I cannot access reactHooksPlugin.configs.recommended with error Property 'configs' does not exist on reactHooksPlugin where reactHooksPlugin is imported as -

import reactHooksPlugin from 'eslint-plugin-react-hooks';

Yep!, the types are broken for plugin.configs.

The problem... plugin.configs is defined as an empty object and then populated using Object.assign so typescript doesn't know it's shape and therefore can't generate types correctly.

https://github.com/facebook/react/blob/d74f061b6908e4841b2eb09c296ca4658dbdd38e/packages/eslint-plugin-react-hooks/src/index.ts#L28C1-L36C32

const plugin = {
  meta: {
    name: 'eslint-plugin-react-hooks',
  },
  configs: {},
  rules,
};


Object.assign(plugin.configs, {
........

[Daniel3711997]

"eslint-plugin-react-hooks": "^6.0.0-rc.2"
Also for the new RC version, the eslint rule 'react compiler' stopped working:
Key "rules": Key "react-hooks/react-compiler": Could not find "react-compiler" in plugin "react-hooks".

RC 1 works fine

[Stanzilla]

Hah okay, I am not alone with this, I though eslint changed something yet again. cc @poteto