Definition for rule 'react-hooks/exhaustive-deps' was not found

Question

I am getting the following eslint error after adding // eslint-disable-next-line react-hooks/exhaustive-deps in my code.

8:14 error Definition for rule 'react-hooks/exhaustive-deps' was not found

I referred to this post to fix this but the solution mentioned doesn't work in my case. Any clue how to suppress this eslint error?

PS I'm using standardjs in conjuction.

Coimbatore

Answer 1

Not a perfect solution but changing:

// eslint-disable-next-line react-hooks/exhaustive-deps

to:

// eslint-disable-next-line

suppressed that error.

Coimbatore

I advise against using // eslint-disable-next-line as that will completely disable all ESLint rules for the following line. – Grendel

Agree, disables should always be as specific as possible to only the rule(s) that really need to be disabled. This should not be considered a solution. – Johnnyjumpup

This should not be the accepted answer. This is a really bad recommendation, especially for this lint issue. – Memnon

// eslint-disable-next-line shouldn't be used to disable as it would disable catching any other rule voilations – Resiniferous

Answer 2

This typically happens because the react-hooks plugin is missing in the .eslintrc plugin configuration. Ensure you have added react-hooks as in the example below:

"plugins": ["react", "react-hooks",],

Sardanapalus

This should really be considered the accepted answer. – Johnnyjumpup

if I don't have a .eslintrc I can just crate a .eslintrc file and add "plugins": ["react", "react-hooks",] in it ? Which directory should I put it in? – Ingar

https://www.npmjs.com/package/eslint-plugin-react-hooks gives you almost all the information you need to know about the configurations – Hankypanky

Which file does this go in? – Dodi

How do we use it for the new flat eslint config eslint.config.js? – Hawger

Answer 3

Make sure you define your react-hooks both in extends and plugins array like this

"extends": [
    "react-hooks",
  ],
  "plugins": [
    "react-hooks"
  ],

Mandeville

This created an error for me: Failed to load plugin 'react-hook' declared in '.eslintrc.js': Cannot find module 'eslint-plugin-react-hook' – Biplane

This is incorrect. Do NOT extend. Follow the official guide: reactjs.org/docs/hooks-rules.html – Anthropography

the official guide is useful – Gardenia

Answer 4

Make sure you have put the rule in the rules object in your .eslintrc. Installing the plugin alone is not enough for the rules to start working

"react-hooks/exhaustive-deps": "warn",

and I assume you have already added react-hooks plugin into the plugins array in the .eslintrc

Runge

Will "react-hooks/exhaustive-deps": "off" or "react-hooks/exhaustive-deps": 0 work to disable globally ? – Ugly

Hey, Taylor, yes both "off" and 0 should work to disable the rule. It depends on what you refer to as "global" in this case. If the eslint config is in your application folder then it will turn it off for the application workspace, if it is a global config and used in many projects it will disable it globally – Runge

Answer 5

Put below code to package.json

"eslintConfig": {
  "extends": "react-app"
}

Countersink

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Mulvaney

this worked for me create-react-app version 5.0.1 react 17 – Fractionize

Answer 6

Assuming you are using vscode and you have in your package.json the necessary packages such as

"eslint-plugin-react-hooks": "^4.3.0",

and in your eslintrc.js

what the other answers have suggested then you might have to just restart

ESLint: Restart ESLint Server from

cmd/ctrl + shift + P

Lidalidah

Answer 7

The most exhaustive and updated answer would be the following (in according to reactjs guide:

• Install eslint-plugin-react-hooks (example: npm install eslint-plugin-react-hooks --save-dev)
• Update your .eslintrc in this way:

{
  "plugins": [
    // ...
    "react-hooks"
  ],
  "rules": {
    // ...
    "react-hooks/exhaustive-deps": "warn"
  }
}

Vinasse