Comments (29)
ESLint v9 support will be done in #28773
from react.
works for me:
"@eslint/compat": "^1.0.1",
"eslint-plugin-react-hooks": "^4.6.2",
"eslint": "9.x",
...
import eslintPluginReactHooks from 'eslint-plugin-react-hooks';
import { fixupPluginRules } from "@eslint/compat";
...
{
plugins: {
'react-hooks': fixupPluginRules(eslintPluginReactHooks)
},
rules: {
...eslintPluginReactHooks.configs.recommended.rules,
}
},
...
from react.
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!
from react.
The following configuration uses typescript-eslint, eslint-plugin-react, eslint-plugin-react-hooks, and eslint-plugin-prettier(eslint-config-prettier). It works well:
// @ts-check
import globals from 'globals';
import eslint from '@eslint/js';
import tseslint from 'typescript-eslint';
import { fixupPluginRules } from '@eslint/compat';
import eslintPluginReact from 'eslint-plugin-react';
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
import eslintPluginReactHooks from 'eslint-plugin-react-hooks';
export default tseslint.config(
eslint.configs.recommended,
...tseslint.configs.recommended,
eslintPluginPrettierRecommended,
{ files: ['**/*.{js,mjs,cjs,ts,jsx,tsx}'] },
{
languageOptions: {
parserOptions: { ecmaFeatures: { jsx: true } },
globals: { ...globals.browser },
},
},
{
plugins: {
'react': eslintPluginReact,
'react-hooks': fixupPluginRules(eslintPluginReactHooks),
},
},
{
rules: {
// ...
...eslintPluginReactHooks.configs.recommended.rules,
},
},
);
from react.
The new ESLint Compatibility Utilities seems to work well for me using [email protected]
from react.
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.
from react.
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.
from react.
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/[email protected][email protected]/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/[email protected][email protected]/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/[email protected]/node_modules/eslint/lib/linter/linter.js:1115:48)
at /home/user/projects/eslint-flat-config-migration/node_modules/.pnpm/[email protected]/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/[email protected]/node_modules/eslint/lib/linter/safe-emitter.js:45:38)
at NodeEventGenerator.applySelector (/home/user/projects/eslint-flat-config-migration/node_modules/.pnpm/[email protected]/node_modules/eslint/lib/linter/node-event-generator.js:297:26)
at NodeEventGenerator.applySelectors (/home/user/projects/eslint-flat-config-migration/node_modules/.pnpm/[email protected]/node_modules/eslint/lib/linter/node-event-generator.js:326:22)
at NodeEventGenerator.enterNode (/home/user/projects/eslint-flat-config-migration/node_modules/.pnpm/[email protected]/node_modules/eslint/lib/linter/node-event-generator.js:340:14)
at runRules (/home/user/projects/eslint-flat-config-migration/node_modules/.pnpm/[email protected]/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!
from react.
What's the status? It still doesn't work with the newest nightly build.
What's not working? Did you follow #28313 (comment)?
My guess is most of us watching this issue are waiting to be able to simply update the version in our package file, not apply an unofficial temporary workaround with a new package. I know that's where we stand.
from react.
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.
from react.
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/[email protected][email protected]/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/[email protected][email protected]/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/[email protected]/node_modules/eslint/lib/linter/linter.js:1115:48) at /home/user/projects/eslint-flat-config-migration/node_modules/.pnpm/[email protected]/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/[email protected]/node_modules/eslint/lib/linter/safe-emitter.js:45:38) at NodeEventGenerator.applySelector (/home/user/projects/eslint-flat-config-migration/node_modules/.pnpm/[email protected]/node_modules/eslint/lib/linter/node-event-generator.js:297:26) at NodeEventGenerator.applySelectors (/home/user/projects/eslint-flat-config-migration/node_modules/.pnpm/[email protected]/node_modules/eslint/lib/linter/node-event-generator.js:326:22) at NodeEventGenerator.enterNode (/home/user/projects/eslint-flat-config-migration/node_modules/.pnpm/[email protected]/node_modules/eslint/lib/linter/node-event-generator.js:340:14) at runRules (/home/user/projects/eslint-flat-config-migration/node_modules/.pnpm/[email protected]/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...
from react.
@eps1lon Thanks for the PR #28773. Do you have an example of how to configure it in a flat config?
I think you may find my flat configuration migration repository useful. Take a look at these files:
React config:
https://github.com/virtuallyunknown/eslint-flat-config-migration/blob/master/configs/react.js
Main config:
https://github.com/virtuallyunknown/eslint-flat-config-migration/blob/master/eslint.config.js
And please do note that I am using canary release, this will not work with version 4.6.2 of the react-hooks eslint plugin.
Also, note that I am just enabling a few rules here and there for testing purposes. If you want to have all rules or recommended rules from some plugin, you can do it like this:
/** @type {import('@typescript-eslint/utils').TSESLint.FlatConfig.ConfigFile} */
export const eslintPluginReactConfig = [
{
languageOptions: {
parserOptions: {
ecmaFeatures: {
jsx: true
}
}
},
plugins: {
'react': eslintPluginReact,
'react-hooks': eslintPluginReactHooks
},
// here include all rules you want to have enabled,
// for example eslintPluginReactHooks.configs.recommended.rules
// you may have to verify that this works for all plugins
rules: {
'react/void-dom-elements-no-children': 'error',
...eslintPluginReactHooks.configs.recommended.rules
}
}
];
from react.
i think this package needs to provide type declarations
Yeah it doesn't, and there's no @types/...
package for it either. You'll need to create your own type declaration like this:
declare module 'eslint-plugin-react-hooks' {
...,
}
I have an example in a personal project here, if that helps.
from react.
@eps1lon how far away from merge/release is this update to support eslint v9?
from react.
@movestill I think you need to use canary builds until React 19 launches if you want compatibility with ESLint 9.
from react.
Thanks for the PR #28773. Do you have an example of how to configure it in a flat config?
No, since we haven't worked on supporting flat config yet. Would love if somebody can take a look. The linked PR only ensured compat with ESLint v9 and the old config format.
from react.
Getting the Definition for rule 'react-hooks/exhaustive-deps' was not found react-hooks/exhaustive-deps
error in the console does anyone have the same issue?
I have tried using both canary and 4.6.2.
My config file looks like this (eslint.config.mjs):
// @ts-check
import globals from "globals";
import pluginJs from "@eslint/js";
import pluginReact from "eslint-plugin-react";
import tseslint from "typescript-eslint";
import { fixupPluginRules } from "@eslint/compat";
import reactHooks from "eslint-plugin-react-hooks";
import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended";
import eslintConfigPrettier from "eslint-config-prettier";
import tsParser from "@typescript-eslint/parser";
import tsPlugin from "@typescript-eslint/eslint-plugin";
export default [
pluginJs.configs.recommended,
pluginReact.configs.flat.recommended,
...tseslint.configs.recommended,
{
files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"],
languageOptions: {
globals: globals.browser,
parser: tsParser
},
plugins: {
react: pluginReact,
"@typescript-eslint": tsPlugin,
"react-hooks": fixupPluginRules(reactHooks)
},
rules: {
"no-unused-vars": [
"warn",
{
varsIgnorePattern: "^_",
argsIgnorePattern: "^_"
}
],
"react/react-in-jsx-scope": "off",
...reactHooks.configs.recommended.rules
}
},
eslintPluginPrettierRecommended,
eslintConfigPrettier
];
from react.
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.
from react.
Should we raise a separate issue for v9 API support?
from react.
Should we raise a separate issue for v9 API support?
Currently under discussion in jsx-eslint/eslint-plugin-react#3699.
from react.
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.
from react.
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!
from react.
I'm getting this error using v4.6.2 with ESLint 9.1.1 and React 18.2.0:
ESLint: 9.1.1
TypeError: context.getScope is not a function
Occurred while linting /Users/me/Documents/frontend/src/components/CTable/CTable.tsx:1013
Rule: "react-hooks/exhaustive-deps"
at visitCallExpression (/Users/me/Documents/frontend/node_modules/eslint-plugin-react-hooks/cjs/eslint-plugin-react-hooks.development.js:1780:34)
at ruleErrorHandler (/Users/me/Documents/frontend/node_modules/eslint/lib/linter/linter.js:1115:48)
at /Users/me/Documents/frontend/node_modules/eslint/lib/linter/safe-emitter.js:45:58
at Array.forEach (<anonymous>)
at Object.emit (/Users/me/Documents/frontend/node_modules/eslint/lib/linter/safe-emitter.js:45:38)
at NodeEventGenerator.applySelector (/Users/me/Documents/frontend/node_modules/eslint/lib/linter/node-event-generator.js:297:26)
at NodeEventGenerator.applySelectors (/Users/me/Documents/frontend/node_modules/eslint/lib/linter/node-event-generator.js:326:22)
at NodeEventGenerator.enterNode (/Users/me/Documents/frontend/node_modules/eslint/lib/linter/node-event-generator.js:340:14)
at runRules (/Users/me/Documents/frontend/node_modules/eslint/lib/linter/linter.js:1154:40)
at Linter._verifyWithFlatConfigArrayAndWithoutProcessors (/Users/me/Documents/frontend/node_modules/eslint/lib/linter/linter.js:1880:31)
from react.
@movestill I think you need to use canary builds until React 19 launches if you want compatibility with ESLint 9.
Thanks for clarifying!
from react.
@eps1lon Thanks for the PR #28773. Do you have an example of how to configure it in a flat config?
from react.
@romantech when i try to do this i get a missing type declaration error at import eslintPluginReactHooks from 'eslint-plugin-react-hooks';
. i think this package needs to provide type declarations
from react.
What's the status? It still doesn't work with the newest nightly build.
from react.
What's the status? It still doesn't work with the newest nightly build.
What's not working? Did you follow #28313 (comment)?
from react.
My guess is most of us watching this issue are waiting to be able to simply update the version in our package file, not apply an unofficial temporary workaround with a new package. I know that's where we stand.
I understand and that's not what I was suggesting. Just trying to find out if we're actually compatible. If people cannot get the Canary to work, we couldn't release a stable. My suggestion was targeted at the person reporting the issue which conflicts with prior reports that it was working.
from react.
Related Issues (20)
- Unexpected Initial State Jump in 'useEffect" with 'setTimeout' and State Dependencies HOT 3
- React[19] Module '"react"' has no exported member 'useActionState'. HOT 2
- Bug: effect runs with stale state values outside of Concurrent React HOT 1
- Feature Request: ESLint hooks rule for accessing previous state when deriving new state
- Bug: Weird Behavior of useCallback() hook When Variables or States Are defined before and after the Callback (ES5) HOT 5
- Bug: div: `ref` is not a prop HOT 2
- Bug: useFormStatus pending state is reset when component state is updated HOT 3
- [React 19] TEST HOT 1
- `FALLBACK_THROTTLE_MS` slows tests down significantly - could it be configurable? HOT 4
- Unexpected state behavior when updating nested state objects HOT 3
- Make pre-release version naming align with semver 2 HOT 5
- [React 19] Omit the false value for custom element is an incorrect behaviour HOT 3
- Remove references to legacy class-based component architecture in error messages
- Bug: deleting structure via DOM API breaks state updates
- Module '"react"' has no exported member 'use' HOT 2
- Bug: Unexpected characters appear in the Chinese encoding during streaming HOT 4
- Bug: useState, state does not update inside websocket.onmessage rather the state value is preserved untill the next render HOT 1
- Bug: When input type=number, input 1-1 cannot trigger an onchange and cannot be set to an empty string
- TestUtils.Simulate alternatives
- use hook issue HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react.