React: Bug: [eslint-plugin-react-hooks] recommended config rules did not work

[bobaaaaa]

Since the latest plugin version (2.5.0) there should be a recommended config for eslint-plugin-react-hooks.

See: https://github.com/facebook/react/tree/master/packages/eslint-plugin-react-hooks
PR: #14762

Unfortunately this config did not work. I'am pretty sure the bundled index.js did not include the expected code.

eslint version: 6.8.0
eslint-plugin-react-hooks version: 2.5.0

Steps To Reproduce

Link to code example:

https://github.com/bobaaaaa/eslint-plugin-react-hooks-err

The current behavior

Oops! Something went wrong! :(

ESLint: 6.8.0.

ESLint couldn't find the config "plugin:react-hooks/recommended" to extend from. Please check that the name of the config is correct.

The config "plugin:react-hooks/recommended" was referenced from the config file in "${projectDir}/eslint-plugin-react-hooks-err/.eslintrc.json".

If you still have problems, please stop by https://gitter.im/eslint/eslint to chat with the team.

error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

The expected behavior

yarn exit code 0

[threepointone]

The commit that landed that behaviour (https://github.com/facebook/react/pull/14762) hasn't been released yet. We could probably do a release sometime, but the workaround right now is to copy paste the recommended config. I'll leave this open till we do.

[SiegeSailor]

I don't want to put anything in rules, here is my workaround.

1. open node_modules/eslint-plugin-react-hooks/index.js, override all with the following code:

'use strict';

// TODO: this doesn't make sense for an ESLint rule.
// We need to fix our build process to not create bundles for "raw" packages like this.
if (process.env.NODE_ENV === 'production') {
  module.exports = {...require('./cjs/eslint-plugin-react-hooks.production.min.js'),
  configs: {
    recommended: {
      rules: {
        "react-hooks/rules-of-hooks": "error",
        "react-hooks/exhaustive-deps": "warn"
      }
    }
  }};
} else {
  module.exports = {...require('./cjs/eslint-plugin-react-hooks.development.js'),
  configs: {
    recommended: {
      rules: {
        "react-hooks/rules-of-hooks": "error",
        "react-hooks/exhaustive-deps": "warn"
      }
    }
  }};
}

[gaearon]

This should've gone out in 3.0.0

[Bluefitdev]

Hey Guys, weirdly i'm still having this error right now

module.exports = {
    env: {
        browser: true,
        es6: true
    },
    extends: [
        "plugin:react/recommended",
        "airbnb",
        "plugin:react-hooks/recommended",
        "prettier"
    ],
    globals: {
        Atomics: "readonly",
        SharedArrayBuffer: "readonly"
    },
    parserOptions: {
        ecmaFeatures: {
            jsx: true
        },
        ecmaVersion: 2018,
        sourceType: "module"
    },
    plugins: ["react", "jsx-a11y", "import", "prettier"],
    rules: {
        "prettier/prettier": "error",
        "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
        "react/require-default-props": [0],
    }
};

That's my eslintrc, just installed the hooks plugin today

version: "eslint-plugin-react-hooks": "^4.0.1",

Anything I should be aware of?'

EDIT:

Sorry i just realised that airbnb is using react hooks 2.5

[IPetrik]

I'm still getting this error now with ^4.1.0....

module.exports = {
  "env": {
    "browser": true,
    "es6": true,
  },
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
  ],
  "parser": "@typescript-eslint/parser",
  "plugins": [
    "react",
  ],
  "rules": {
    "@typescript-eslint/member-delimiter-style": [
        "error", {
        multiline: {
          delimiter: "none",
          requireLast: true,
        },
        singleline: {
          delimiter: "semi",
          requireLast: false,
        },
      },
      ],
  },
  "settings": {
    "import/resolver": {
        "node": {
            "extensions": [".js", ".jsx", ".ts", ".tsx"],
          },
      },
  },
}

Edit: works after complete purge of node_modules and package-lock.json; might have been a conflict with the [email protected] peer dep...