Bug: eslint-plugin-react-hooks: Cannot read property 'references' of undefined

[Xiot]

eslint-plugin-react-hooks is throwing a Cannot read property 'references' of undefined error on /node_modules/eslint-plugin-react-hooks/cjs/eslint-plugin-react-hooks.development.js:1683:23

I added a console log statement before that line

var usedDep = dependencies.get(missingDep);
          console.log('usedDep', usedDep, missingDep, dependencies)
          if (usedDep.references[0].resolved !== topScopeRef) {   // error is thrown here

and this is the output.

usedDep undefined program?.slug Map {
  'program?.uuid' => { isStatic: false, references: [ [Reference] ] },
  'monitorService' => { isStatic: false, references: [ [Reference] ] },
  'navigate' => { isStatic: false, references: [ [Reference] ] },
  'program.slug' => { isStatic: false, references: [ [Reference] ] } }

I don't actually have program?.slug referenced anywhere in this file.
I am using program.slug though.

Versions:
eslint-plugin-react-hooks@4.0.4
eslint@6.8.0
babel-eslint@10.1.0

Steps To Reproduce

The code below throws the error.
I have found 2 ways to stop the error from happening.

1. Removing the line programUuid: program?.uuid ?? '',
2. adding program.slug to the list of dependencies.

Link to code example:

const onSave = useCallback(
    args => {
      const request: CreateMonitorV3Request = {
        programUuid: program?.uuid ?? '',        
      };

      monitorService
        .create(request)
        .then(x => {
          // $FlowFixMe - program will be available
          navigate(`/programs/${program.slug}/monitors/${x.uuid}`);
        })
        .catch(ex => {
          console.log('error', ex);
        });
    },
    [monitorService, program?.uuid]
  );

The current behavior

Error is thrown Cannot read property 'references' of undefined

The expected behavior

eslint successfully reports that I'm missing dependencies in useCallback

Full Stack trace:

TypeError: Cannot read property 'references' of undefined
Occurred while linting /project-root/src/pages/monitor/configuration-pages/new-monitor-page.js:26
    at /project-root/node_modules/eslint-plugin-react-hooks/cjs/eslint-plugin-react-hooks.development.js:1683:23
    at Set.forEach (<anonymous>)
    at visitFunctionWithDependencies (/project-root/node_modules/eslint-plugin-react-hooks/cjs/eslint-plugin-react-hooks.development.js:1674:29)
    at visitCallExpression (/project-root/node_modules/eslint-plugin-react-hooks/cjs/eslint-plugin-react-hooks.development.js:826:11)
    at listeners.(anonymous function).forEach.listener (/project-root/node_modules/eslint/lib/linter/safe-emitter.js:45:58)
    at Array.forEach (<anonymous>)
    at Object.emit (/project-root/node_modules/eslint/lib/linter/safe-emitter.js:45:38)
    at NodeEventGenerator.applySelector (/project-root/node_modules/eslint/lib/linter/node-event-generator.js:254:26)
    at NodeEventGenerator.applySelectors (/project-root/node_modules/eslint/lib/linter/node-event-generator.js:283:22)
    at NodeEventGenerator.enterNode (/project-root/node_modules/eslint/lib/linter/node-event-generator.js:297:14)

[bvaughn]

I can't reproduce this error. Using the code example you pasted above:

const onSave = useCallback(
    args => {
      const request: CreateMonitorV3Request = {
        programUuid: program?.uuid ?? '',        
      };

      monitorService
        .create(request)
        .then(x => {
          // $FlowFixMe - program will be available
          navigate(`/programs/${program.slug}/monitors/${x.uuid}`);
        })
        .catch(ex => {
          console.log('error', ex);
        });
    },
    [monitorService, program?.uuid]
  );

I see:

Line 24:5: React Hook useCallback has missing dependencies: 'navigate' and 'program'. Either include them or remove the dependency array. If 'navigate' changes too often, find the parent component that defines it and wrap that definition in useCallback react-hooks/exhaustive-deps
Line 24:22: React Hook useCallback has a complex expression in the dependency array. Extract it to a separate variable so it can be statically checked react-hooks/exhaustive-deps

This is using both eslint-plugin-react-hooks@1.7.0 which is the version create-react-app installs and the latest version (v4.0.4) which I pulled in using a resolution:

  "resolutions": {
    "react-scripts/eslint-plugin-react-hooks": "^4.0.4"
  },

[bvaughn]

Which Node version are you using? (I'm using v12.16.2 and I also tested v10.20.1 without problem.)

[Xiot]

10.16.3
I'm also using flow
eslint-plugin-flowtype@4.7.0

My guess is that its a mismatch between the flow and react-hooks linter.

in this instance program is resolved to the ?Program type.
So it looks like its adding program?.slug to handle the case where program == null however program?.slug isn't found as a dependency.

The issue probably comes down to the fact that I'm referencing program?.uuid and program.slug (without the optional). Changing the line with navigate to use program?.slug avoids the error.

In my case I know for fact that program will always have a value, which is why I have that $FlowFixMe line.

Also, if I change the programUuid: program?.uuid ?? '', line to programUuid: program.uuid ?? '', (removed the ?) then the plugin suggests that I add the dependencies without the ? (ie, program.uuid, program.slug)

[yanneves]

adding program.slug to the list of dependencies.

from looking at your code example, you should have program.slug defined in your dependencies anyway, I believe

[Xiot]

Ya, my dependencies were incorrect, however ideally there shouldn't be an exception when identify the missing dependencies.

[yanneves]

Agreed, I could see some similar code used for useEffect - this should be addressable with #18926 to add support for optional chaining in useCallback

[nathggns]

I'm also getting this.

[coolkev]

The suggested edit I made on PR #19062 (comment) will fix this issue.

[fredvollmer]

Thanks to @coolkev I just updated #19062 to include a fix for this issue.