CODEWITHSUNDEEP
javascriptreactjsreact-hookseslintstandardjs
UtkarshPramodGupta
UtkarshPramodGupta

Reputation: 8152

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

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.

Upvotes: 64

Views: 50790

Answers (8)

Quirzo
Quirzo

Reputation: 1425

With new flat config you need to do it like this (source):

  1. First install the plugin npm i eslint-plugin-react-hooks
  2. Open your config file, such as eslint.config.mjs
  3. Add a new import statement
import reactHooks from "eslint-plugin-react-hooks";
  1. Add the following object to the export default
  {
    plugins: {
      'react-hooks': reactHooks
    },
    rules: {
      'react-hooks/rules-of-hooks': 'error',
      'react-hooks/exhaustive-deps': 'warn',
    }
  }

For example, part of my config file:

export default [
  { files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"] },
  { languageOptions: { globals: globals.browser } },
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  pluginReact.configs.flat.recommended,
  {
    settings: {
      react: {
        version: "detect"
      }
    }
  },
  {
    plugins: {
      'react-hooks': reactHooks
    },
    rules: {
      'react-hooks/rules-of-hooks': 'error',
      'react-hooks/exhaustive-deps': 'warn',
    }
  }
];

Upvotes: 1

Elidor00
Elidor00

Reputation: 1622

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"
  }
}

Upvotes: 0

MickeyWoW
MickeyWoW

Reputation: 51

Put below code to package.json

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

Upvotes: 2

Byron
Byron

Reputation: 771

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

Upvotes: 2

UtkarshPramodGupta
UtkarshPramodGupta

Reputation: 8152

Not a perfect solution but changing:

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

to:

// eslint-disable-next-line

suppressed that error.

Upvotes: 2

JupiterAmy
JupiterAmy

Reputation: 384

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

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

Upvotes: 9

Erik Töyrä Silfverswärd
Erik Töyrä Silfverswärd

Reputation: 10496

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",],

Upvotes: 124

Mark Shulhin
Mark Shulhin

Reputation: 119

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

Upvotes: 5

Related Questions