bug: eslint-plugin-react-hooks throws TypeError: context.getSource is not a function

[EuanMorgan]

Provide environment information

  System:
    OS: macOS 14.4.1
    CPU: (8) arm64 Apple M2
    Memory: 1.60 GB / 24.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.12.0 - /usr/local/bin/node
    Yarn: 1.22.21 - ~/Library/pnpm/yarn
    npm: 10.5.0 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
    bun: 1.0.29 - ~/.bun/bin/bun
    Watchman: 2023.12.04.00 - /opt/homebrew/bin/watchman

Describe the bug

Apologies if this is an upstream issue but the eslint-plugin-react-hooks isn't working with the current V9 setup.

In the ESLint console you can see the following error:

[Error - 13:45:42] An unexpected error occurred:
[Error - 13:45:42] TypeError: context.getSource is not a function
Occurred while linting /Users/euanmorgan/code/create-t3-turbo/apps/nextjs/src/app/_components/posts.tsx:46
Rule: "react-hooks/exhaustive-deps"
    at visitFunctionWithDependencies (/Users/euanmorgan/code/create-t3-turbo/node_modules/eslint-plugin-react-hooks/cjs/eslint-plugin-react-hooks.development.js:1704:42)
    at visitCallExpression (/Users/euanmorgan/code/create-t3-turbo/node_modules/eslint-plugin-react-hooks/cjs/eslint-plugin-react-hooks.development.js:1759:11)
    at ruleErrorHandler (/Users/euanmorgan/code/create-t3-turbo/node_modules/eslint/lib/linter/linter.js:1145:48)
    at /Users/euanmorgan/code/create-t3-turbo/node_modules/eslint/lib/linter/safe-emitter.js:45:58
    at Array.forEach (<anonymous>)
    at Object.emit (/Users/euanmorgan/code/create-t3-turbo/node_modules/eslint/lib/linter/safe-emitter.js:45:38)
    at NodeEventGenerator.applySelector (/Users/euanmorgan/code/create-t3-turbo/node_modules/eslint/lib/linter/node-event-generator.js:297:26)
    at NodeEventGenerator.applySelectors (/Users/euanmorgan/code/create-t3-turbo/node_modules/eslint/lib/linter/node-event-generator.js:326:22)
    at NodeEventGenerator.enterNode (/Users/euanmorgan/code/create-t3-turbo/node_modules/eslint/lib/linter/node-event-generator.js:340:14)
    at runRules (/Users/euanmorgan/code/create-t3-turbo/node_modules/eslint/lib/linter/linter.js:1184:40)

Link to reproduction

N/A

To reproduce

1. Clone the latest create-t3-turbo
2. Trigger an eslint-plugin-react-hooks rule
   e.g. In CreatePostForm write a useEffect like

 useEffect(() => {
    console.log(form.getValues());
  }, []);

3. The error will then appear in the terminal and linting is broke for the file

Additional information

No response

[adamspotlite]

@EuanMorgan definitely not a solution, but as a temporary fix:

import baseConfig from "@acme/eslint-config/base";
import nextjsConfig from "@acme/eslint-config/nextjs";
import reactConfig from "@acme/eslint-config/react";

/** @type {import('typescript-eslint').Config} */
export default [
  ...baseConfig,
  ...reactConfig,
  ...nextjsConfig,
  {
    ignores: [".next/**"],
    rules: {
      "react-hooks/exhaustive-deps": "off",
    },
  },
];

disabled that rule so i could at least run my linter in CI...

I believe this was introduced with #969.

[EuanMorgan]

@adamspotlite The issue seems to be with the entire react-hooks eslint not just the exhaustive deps rule
To suppress the errors I've temporarily commented out any references to eslint-plugin-react-hooks in tooling/eslint/react.js

[gangjun06]

I also have the same issue.

I believe this was introduced with #969.

I think so too. Eslint 9 is not ready for nextJS.

eslint peerDependency in eslint-config-next is ^8.0.0 instead of ^9.0.0.
https://github.com/vercel/next.js/blob/2a605af1547776f918a23e074eb9309cab18a0a7/packages/eslint-config-next/package.json#L24

Eslint 9.0.0 has a breaking change.
context.getAncestors() has been replaced with sourceCode.getAncestors(node)
https://eslint.org/docs/latest/use/migrate-to-9.0.0#-removed-multiple-context-methods

For now, changing Eslint version to ^8.56.0 seems to fix it

[smaven]

The issue seems to have been resolved in the canary release of eslint-plugin-react-hooks.
facebook/react#28773

However, using some rules from eslint-plugin-react such as react/display-name or other recommended ones still doesn't work. This is being addressed in jsx-eslint/eslint-plugin-react#3699.

[dBianchii]

Yeah, for now I just ran pnpm i eslint-plugin-react-hooks@canary -F eslint-config to fix it.

[juliusmarminge]

Fixed in 19a823e

[adamspotlite]

Just for visibility, I'm on 9.2.0 and still getting this.

[juliusmarminge]

Just for visibility, I'm on 9.2.0 and still getting this.

Are you using the beta channel of the react-hooks plugin?

[adamspotlite]

hmmm, i don't believe so. I followed 19a823e and just bumped versions. What needs to be done?

[juliusmarminge]

That commit did bump version to beta. Should work ootb

[Darkmift]

still occuring to me

[cipriancaba]

I have it too

eslint-plugin-react-hooks:
        specifier: beta
        version: 5.1.0-beta-26f2496093-20240514(eslint@9.4.0)

[kidonng]

eslint-plugin-react-hooks@rc (not beta) has a newer version (5.1.0-rc-cc1ec60d0d-20240607) that works for me (with eslint@^9.4.0 and @antfu/eslint-config@^2.20.0).

[glyph-cat]

Hoping on the train too, just to provide extra context. Not sure why, in one of my public projects, it works fine. But in another private project, with the same eslint.config.js configurations and exact same versions of eslint, eslint-plugin-react, eslint-plugin-react-hooks (and other relevant eslint plugin/config packages), it fails with the message "context.getSource is not a function" when evaluating under rule "react-hooks/rules-of-hooks".

For now, using the @rc version solves the problem, just that it makes me wonder if this is an indication of another underlying problem… may be just something to watch out for.

[perkrlsn]

Solution can be found here

TL;DR

add @eslint/compat to your repo and use fixupPluginRules.

import reactPlugin from "eslint-plugin-react";
import reactHooksPlugin from "eslint-plugin-react-hooks";
import { fixupPluginRules } from "@eslint/compat";

/**  @type {import('eslint').Linter.FlatConfig}*/
export default [
  {
    plugins: {
      react: reactPlugin,
      "react-hooks": fixupPluginRules(reactHooksPlugin),
    },
    rules: {
      ...reactHooksPlugin.configs.recommended.rules,
    },
  },
];

[Amantel]

import reactHooksPlugin from "eslint-plugin-react-hooks";

Any idea how to do that on old (not flat) config?