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