eslint-plugin-react-hooks & "Flat Config" (ESLint 9) #28313

JoshuaKGoldberg · 2024-02-13T14:14:11Z

👋 Coming over from eslint/eslint#18093: ESLint is migrating to a new "flat config" format that will be the default in ESLint v9.

It doesn't look like eslint-plugin-react-hooks has documented support yet. But, based on searching around (e.g. vercel/next.js#49337), ESLint v9 is basically supported if you wire it up manually in your config:

// eslint.config.js
import eslint from "@eslint/js";
import hooksPlugin from "eslint-plugin-react-hooks";

export default [
  eslint.configs.recommended,
  {
    plugins: {
      "react-hooks": hooksPlugin,
    },
    rules: hooksPlugin.configs.recommended.rules,
  },
];

Most community plugins provide a more convenient wrapper. For example, eslint-plugin-jsdoc provides a jsdoc.configs['flat/recommended'] object:

// eslint.config.js
import jsdoc from 'eslint-plugin-jsdoc';

export default [
  jsdoc.configs['flat/recommended'],
];

Would the React team be open to a PR adding in a preset object like that? And either way, updating the docs on https://www.npmjs.com/package/eslint-plugin-react-hooks?

Note: this was also filed as reactjs/react.dev#6430.

I'm posting this issue here as a reference & cross-linking it to the table in eslint/eslint#18093. If there's anything technical blocking the extension from working with flat configs, please let us know - we'd be happy to try to help! 💜

Additional resources:

Configuration Migration Guide
(edit) Plugin Migration Guide
Blog posts on the new config system: Part 1: Background, Part 2: Introduction to flat config

(sorry for not using the issue templates - I wasn't sure whether this would count as a bug)

The text was updated successfully, but these errors were encountered:

eps1lon · 2024-02-13T15:38:42Z

Thank you for reaching out. What would be involved in creating such a wrapper? Does it make more sense to file a PR and then see how it'll look?

We're only on ESLint 7 though so I guess we need to upgrade that first to test.

JoshuaKGoldberg · 2024-02-13T15:45:30Z

What would be involved in creating such a wrapper?

It's not too much work (famous last words, I know). In theory the plugin should be able to get away with exporting an object containing configs, meta, and rules. https://eslint.org/docs/latest/extend/plugin-migration-flat-config#adding-plugin-meta-information shows a very minimal object.

make more sense to file a PR and then see how it'll look?

👍

We're only on ESLint 7 though so I guess we need to upgrade that first to test.

Yeah it feels like it'd probably be cleanest to upgrade to ESLint 8 first, just in case any breaking changes impact the plugin.

RoystonS · 2024-04-05T23:36:59Z

Note that even wiring up the plugin manually doesn't enable it to work with the now-released ESLint 9: the plugin currently uses APIs like context.getSource which don't exist any more (eslint/eslint#17520), so there'll need to be some upgrade work.

e.g.

react/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js

Line 529 in 2acfb7b

`${context.getSource(reactiveHook)} will be lost after each ` +

JstnMcBrd · 2024-04-06T06:09:35Z

Eslint officially released v9.0.0 today. However, the eslint-plugin-react-hooks plugin still restricts eslint to v8 in the peerDependencies list, so nobody who uses the plugin can download v9 without breaking dependency resolution.

Hope you'll add support for v9 soon!

RoystonS · 2024-04-06T14:57:30Z

Should we raise a separate issue for v9 API support?

yhx-12243 · 2024-04-06T15:03:50Z

Should we raise a separate issue for v9 API support?

Currently under discussion in jsx-eslint/eslint-plugin-react#3699.

eps1lon · 2024-04-06T15:49:04Z

ESLint v9 support will be done in #28773

josiahgallen · 2024-04-18T16:39:27Z

@eps1lon how far away from merge/release is this update to support eslint v9?

virtuallyunknown · 2024-04-22T14:39:20Z

ESLint v9 support will be done in #28773

Hey @eps1lon, greetings!

I just wanted to ask, is #28773 part of the 4.6.0 release that was published on npm 3 days ago or it's planned for a future release?

I am currently in the process of migrating to flat config, and the plugin is giving me an error.

Oops! Something went wrong! :(

ESLint: 9.1.0

TypeError: context.getSource is not a function
Occurred while linting /home/user/projects/eslint-flat-config-migration/src/index.tsx:8
Rule: "react-hooks/exhaustive-deps"
    at visitFunctionWithDependencies (/home/user/projects/eslint-flat-config-migration/node_modules/.pnpm/eslint-plugin-react-hooks@4.6.0_eslint@9.1.0/node_modules/eslint-plugin-react-hooks/cjs/eslint-plugin-react-hooks.development.js:1704:42)
    at visitCallExpression (/home/user/projects/eslint-flat-config-migration/node_modules/.pnpm/eslint-plugin-react-hooks@4.6.0_eslint@9.1.0/node_modules/eslint-plugin-react-hooks/cjs/eslint-plugin-react-hooks.development.js:1759:11)
    at ruleErrorHandler (/home/user/projects/eslint-flat-config-migration/node_modules/.pnpm/eslint@9.1.0/node_modules/eslint/lib/linter/linter.js:1115:48)
    at /home/user/projects/eslint-flat-config-migration/node_modules/.pnpm/eslint@9.1.0/node_modules/eslint/lib/linter/safe-emitter.js:45:58
    at Array.forEach (<anonymous>)
    at Object.emit (/home/user/projects/eslint-flat-config-migration/node_modules/.pnpm/eslint@9.1.0/node_modules/eslint/lib/linter/safe-emitter.js:45:38)
    at NodeEventGenerator.applySelector (/home/user/projects/eslint-flat-config-migration/node_modules/.pnpm/eslint@9.1.0/node_modules/eslint/lib/linter/node-event-generator.js:297:26)
    at NodeEventGenerator.applySelectors (/home/user/projects/eslint-flat-config-migration/node_modules/.pnpm/eslint@9.1.0/node_modules/eslint/lib/linter/node-event-generator.js:326:22)
    at NodeEventGenerator.enterNode (/home/user/projects/eslint-flat-config-migration/node_modules/.pnpm/eslint@9.1.0/node_modules/eslint/lib/linter/node-event-generator.js:340:14)
    at runRules (/home/user/projects/eslint-flat-config-migration/node_modules/.pnpm/eslint@9.1.0/node_modules/eslint/lib/linter/linter.js:1154:40)

If needed, here is a my repository where the issue can be reproduced by running npx eslint src/index.tsx

https://github.com/virtuallyunknown/eslint-flat-config-migration

Relevant files:
https://github.com/virtuallyunknown/eslint-flat-config-migration/blob/master/eslint.config.js
https://github.com/virtuallyunknown/eslint-flat-config-migration/blob/master/configs/react.js

Cheers!

JacobZyy · 2024-04-22T17:20:54Z

ESLint v9 support will be done in #28773

Hey @eps1lon, greetings!

I just wanted to ask, is #28773 part of the 4.6.0 release that was published on npm 3 days ago or it's planned for a future release?

I am currently in the process of migrating to flat config, and the plugin is giving me an error.

Oops! Something went wrong! :(

ESLint: 9.1.0

TypeError: context.getSource is not a function
Occurred while linting /home/user/projects/eslint-flat-config-migration/src/index.tsx:8
Rule: "react-hooks/exhaustive-deps"
    at visitFunctionWithDependencies (/home/user/projects/eslint-flat-config-migration/node_modules/.pnpm/eslint-plugin-react-hooks@4.6.0_eslint@9.1.0/node_modules/eslint-plugin-react-hooks/cjs/eslint-plugin-react-hooks.development.js:1704:42)
    at visitCallExpression (/home/user/projects/eslint-flat-config-migration/node_modules/.pnpm/eslint-plugin-react-hooks@4.6.0_eslint@9.1.0/node_modules/eslint-plugin-react-hooks/cjs/eslint-plugin-react-hooks.development.js:1759:11)
    at ruleErrorHandler (/home/user/projects/eslint-flat-config-migration/node_modules/.pnpm/eslint@9.1.0/node_modules/eslint/lib/linter/linter.js:1115:48)
    at /home/user/projects/eslint-flat-config-migration/node_modules/.pnpm/eslint@9.1.0/node_modules/eslint/lib/linter/safe-emitter.js:45:58
    at Array.forEach (<anonymous>)
    at Object.emit (/home/user/projects/eslint-flat-config-migration/node_modules/.pnpm/eslint@9.1.0/node_modules/eslint/lib/linter/safe-emitter.js:45:38)
    at NodeEventGenerator.applySelector (/home/user/projects/eslint-flat-config-migration/node_modules/.pnpm/eslint@9.1.0/node_modules/eslint/lib/linter/node-event-generator.js:297:26)
    at NodeEventGenerator.applySelectors (/home/user/projects/eslint-flat-config-migration/node_modules/.pnpm/eslint@9.1.0/node_modules/eslint/lib/linter/node-event-generator.js:326:22)
    at NodeEventGenerator.enterNode (/home/user/projects/eslint-flat-config-migration/node_modules/.pnpm/eslint@9.1.0/node_modules/eslint/lib/linter/node-event-generator.js:340:14)
    at runRules (/home/user/projects/eslint-flat-config-migration/node_modules/.pnpm/eslint@9.1.0/node_modules/eslint/lib/linter/linter.js:1154:40)

If needed, here is a my repository where the issue can be reproduced by running npx eslint src/index.tsx

https://github.com/virtuallyunknown/eslint-flat-config-migration

Relevant files: https://github.com/virtuallyunknown/eslint-flat-config-migration/blob/master/eslint.config.js https://github.com/virtuallyunknown/eslint-flat-config-migration/blob/master/configs/react.js

Cheers!

got the same error and I turn off the rules about react-hooks...

smaven · 2024-04-25T05:48:11Z

The issue seems to have been resolved in the canary release.

If you are using eslint-plugin-react, some rules such as react/display-name or other recommended ones don't work: jsx-eslint/eslint-plugin-react#3699.

eps1lon · 2024-04-25T09:51:04Z

If you are using eslint-plugin-react

eslint-plugin-react is not authored by the React team. Please file an issue for this plugin in https://github.com/jsx-eslint/eslint-plugin-react instead.

ESLint v9 support is available in the Canary release channel (earliest version 5.1.0-canary-cb151849e1-20240424) and will be released as stable with the stable release of React 19.

virtuallyunknown · 2024-04-25T13:16:26Z

I am not sure if this feedback is of any value, but it looks like the types from eslint and typescript-eslint are signaling about potential issues.

// @ts-check

// @typescript-eslint/utils: 7.7.1
// eslint-plugin-react-hooks: 5.1.0-canary-cb151849e1-20240424

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

/** @type {import('eslint').Linter.FlatConfig[]} */
export const configuration1 = [
    {
        plugins: {
            'react-hooks': eslintPluginReactHooks
        }
    }
];

/** @type {import('@typescript-eslint/utils').TSESLint.FlatConfig.ConfigFile} */
export const configuration2 = [
    {
        plugins: {
            'react-hooks': eslintPluginReactHooks
        }
    }
];

I don't want to paste the error message because it's a giant wall of text, but feel free to try it on your own.

This appears to be a type error only, and as far as I can tell the plugin is working as expected, so thanks for the updates, much appreciated!

JoshuaKGoldberg mentioned this issue Feb 13, 2024

📈 Tracking: Flat Config support eslint/eslint#18093

Open

37 tasks

otakustay mentioned this issue Feb 14, 2024

支持Flat Config ecomfe/eslint-config#84

Open

11 tasks

MarcusNotheis mentioned this issue Feb 14, 2024

chore: migrate to eslint flat config SAP/ui5-webcomponents-react#5493

Draft

4 tasks

smeng9 mentioned this issue Apr 6, 2024

feat(create-vite): add eslint.config.js to React templates vitejs/vite#12860

Open

9 tasks

eps1lon mentioned this issue Apr 6, 2024

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

Merged

eps1lon added the Component: ESLint Rules label Apr 6, 2024

sabertazimi mentioned this issue Apr 7, 2024

ESLint v9 support sabertazimi/bod#1175

Open

18 tasks

nnmax mentioned this issue Apr 7, 2024

Support ESLint v9 nnmax/eslint-config#26

Open

5 tasks

ljharb mentioned this issue Apr 8, 2024

eslint v9 support airbnb/javascript#2961

Open

9 tasks

meatwallace mentioned this issue Apr 10, 2024

reenable react eslint plugin rules when updated to support eslint 9 meatwallace/campaign#7

Open

davidjbng mentioned this issue Apr 10, 2024

feat!(eslint-plugin-query): Migrate to ESLint v9 with Flat Config Support TanStack/query#7253

Draft

8 tasks

haines mentioned this issue Apr 10, 2024

Migrate to new ESLint flat configuration format cerbos/cerbos-sdk-javascript#922

Open

5 tasks

fujikky mentioned this issue Apr 14, 2024

Support ESLint v9 jubilee-works/eslint-config-timetree#502

Open

arantespp mentioned this issue Apr 16, 2024

Migrate to ESLint v9 ttoss/ttoss#526

Open

phantomjinx mentioned this issue Apr 23, 2024

Migrate ESLint to version 9 hawtio/hawtio-online#446

Open

dudeofawesome mentioned this issue Apr 25, 2024

Upgrade to ESLint 9 dudeofawesome/code-style#19

Open

11 tasks

frothedoatmilk mentioned this issue Apr 25, 2024

Switch to eslint flat config umts/public-message-board#99

Open

KOBA789 mentioned this issue Apr 26, 2024

Update dependency eslint to v9 arkedge/gaia#161

Open

1 task

JoshuaKGoldberg mentioned this issue Apr 30, 2024

feat: support ESLint v9 typescript-eslint/typescript-eslint#9002

Open

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

eslint-plugin-react-hooks & "Flat Config" (ESLint 9) #28313

eslint-plugin-react-hooks & "Flat Config" (ESLint 9) #28313

JoshuaKGoldberg commented Feb 13, 2024 •

edited

eps1lon commented Feb 13, 2024

JoshuaKGoldberg commented Feb 13, 2024

RoystonS commented Apr 5, 2024

JstnMcBrd commented Apr 6, 2024

RoystonS commented Apr 6, 2024

yhx-12243 commented Apr 6, 2024 •

edited

eps1lon commented Apr 6, 2024

josiahgallen commented Apr 18, 2024

virtuallyunknown commented Apr 22, 2024

JacobZyy commented Apr 22, 2024

smaven commented Apr 25, 2024

eps1lon commented Apr 25, 2024

virtuallyunknown commented Apr 25, 2024 •

edited

eslint-plugin-react-hooks & "Flat Config" (ESLint 9) #28313

eslint-plugin-react-hooks & "Flat Config" (ESLint 9) #28313

Comments

JoshuaKGoldberg commented Feb 13, 2024 • edited

eps1lon commented Feb 13, 2024

JoshuaKGoldberg commented Feb 13, 2024

RoystonS commented Apr 5, 2024

JstnMcBrd commented Apr 6, 2024

RoystonS commented Apr 6, 2024

yhx-12243 commented Apr 6, 2024 • edited

eps1lon commented Apr 6, 2024

josiahgallen commented Apr 18, 2024

virtuallyunknown commented Apr 22, 2024

JacobZyy commented Apr 22, 2024

smaven commented Apr 25, 2024

eps1lon commented Apr 25, 2024

virtuallyunknown commented Apr 25, 2024 • edited

JoshuaKGoldberg commented Feb 13, 2024 •

edited

yhx-12243 commented Apr 6, 2024 •

edited

virtuallyunknown commented Apr 25, 2024 •

edited