When I tried the config snippet in the question by @Jonathan Kasser, I got an error: TypeError: context.getSource is not a function.
The solution is to use fixupPluginRules from @eslint/compat (you need to install this), so my eslint.config.js has a separate object in the config array:
import { fixupPluginRules } from "@eslint/compat";
// Even though eslint-plugin-react-hooks exposes configs.recommended, it is not yet compatible with the flat file config,
// because it has plugins: [ 'react-hooks' ] property, but plugins should be an object
// Once it is supported, replace with: eslintPluginReactHooks.configs.recommended,
{
plugins: {
"react": reactPlugin, // remove this if you already have another config object that adds the react plugin
"react-hooks": fixupPluginRules(eslintPluginReactHooks),
},
rules: {
...eslintPluginReactHooks.configs.recommended.rules,
},
},
Resources
- https://github.com/t3-oss/create-t3-turbo/issues/984#issuecomment-2210934687
Proof it works
I've confirmed this by having a code that should error, and saw the error:
const [first, setfirst] = useState("");
useEffect(() => {
console.log(first);
}, []);
8:6 warning React Hook useEffect has a missing dependency: 'first'. Either include it or remove the dependency array react-hooks/exhaustive-deps
When I tried the config snippet in the question by @Jonathan Kasser, I got an error: TypeError: context.getSource is not a function.
The solution is to use fixupPluginRules from @eslint/compat (you need to install this), so my eslint.config.js has a separate object in the config array:
import { fixupPluginRules } from "@eslint/compat";
// Even though eslint-plugin-react-hooks exposes configs.recommended, it is not yet compatible with the flat file config,
// because it has plugins: [ 'react-hooks' ] property, but plugins should be an object
// Once it is supported, replace with: eslintPluginReactHooks.configs.recommended,
{
plugins: {
"react": reactPlugin, // remove this if you already have another config object that adds the react plugin
"react-hooks": fixupPluginRules(eslintPluginReactHooks),
},
rules: {
...eslintPluginReactHooks.configs.recommended.rules,
},
},
Resources
- https://github.com/t3-oss/create-t3-turbo/issues/984#issuecomment-2210934687
Proof it works
I've confirmed this by having a code that should error, and saw the error:
const [first, setfirst] = useState("");
useEffect(() => {
console.log(first);
}, []);
8:6 warning React Hook useEffect has a missing dependency: 'first'. Either include it or remove the dependency array react-hooks/exhaustive-deps
[email protected] was released a few weeks ago with "stable" eslint v9 support. If you can upgrade, then see https://github.com/facebook/react/issues/28313#issuecomment-2408157792 for a sample configuration for now.
Also, follow this thread if interested in documentation refresh
» npm install eslint-plugin-react-hooks
eslint-plugin-react-hooks & "Flat Config" (ESLint 9)
cannot upgrade `eslint` to v9 due to `eslint-plugin-react-hooks` peer dependancies
How to use eslint-plugin-react and eslint-plugin-react-hooks, just for myself?
Is eslint-plugin-react is unnecessary if i use @typescript-eslint/eslint-plugin and eslint-plugin-react-hooks?
Forgive me if this question is poorly worded or misinformed; I'm new to using NPM.
My team has eslint installed as a dev dependency in our project to ensure high code quality. However, we don't use the eslint-plugin-react or eslint-plugin-react-hooks packages. I'd like to install them so that I can follow the best React practices when coding, without actually making changes to the official dependencies used by all developers. Is there a way to go about this (eg, modify a personal "packages.json" that is separate from the project's but will still lint my company's project)?
it seems that the following plugins are sufficient for my usage of React and Typescript.
"@typescript-eslint/eslint-plugin": "^5.59.9","@typescript-eslint/parser": "^5.59.9","eslint-plugin-react-hooks": "^4.6.0","eslint-plugin-react-refresh": "^0.4.3",
I'm unsure if eslint-plugin-react provides any useful rules.
Could you provide some examples? Thanks.
When I want a useEffect to run on component mount, I pass an empty array as the dependency list. As far as I know, this is the canonical way to achieve this behaviour in functional React, but ESLint doesn't like it in a lot of cases, e.g.:
const dispatch = useAppDispatch();
useEffect(() => {
// some logic
dispatch(something());
}, []);Will generate an ESLint react-hooks/exhaustive-deps warning because of dispatch, which I'll have to suppress. Anytime I need to suppress a warning I try to use it as a cue to rework how I'm approaching a problem, but I don't really see an alternative approach here without seriously overcomplicating things.
Are there any potentially disastrous consequences to doing this that I'm overlooking?
I have some projects with Eslint 8 and setup with its `.eslintrc.json` configuration files.
With ESLint 9, configuration files are switched to flat configuration
https://eslint.org/docs/latest/use/configure/configuration-files
Even if you switch to flat configuration, it still needs to be enabled in VSCode as experimental setting
"eslint.experimental.useFlatConfig": true
My projects are working OK with old Eslint 8 support. I want to ask should I switch to Eslint 9 and flat configuration? Especially that experimental setting makes me wonder is this new configuration system is reliable enough at its current state?
Hi all!
I am currently trying to upgrade eslint to v9 in some projects and am running into a few issues here and there.
I think the biggest issue is that CRA is dropped (we already migrated to Vite) and eslint-config-react-app is no longer maintained, which we have been using since a few years now. I have been trying to re-implement it locally in a project, but that's a really tedious act, e.g. validating which rules are not needed.
Did anyone run into this issue as well? What did you do?
And generally: What does your eslint v9 config look like?
PS: Please don't recommend Biome, Oxlint or other tools as a replacement. I am aware of these and they look really promising, but they do not meet our requirements (yet!) :)