Bug: eslint-plugin-react-hooks (4.1.2) - The prop value with an expression type of ChainExpression could not be resolved

[LauraBeatris]

React version: ^16.10.2

Steps To Reproduce

1. Install eslint-plugin-react-hooks@4.1.2
2. Run yarn eslint src --ext=js,jsx,ts,tsx

Related issue: #19810 (comment)

The current behavior

The linter is showing the following message:

The prop value with an expression type of ChainExpression could not be resolved. Please file issue to get this fixed immediately.

It started to appear on eslint-plugin-react-hooks@4.1.2

The expected behavior

Do not show the message

[eps1lon]

Thanks for the report. Including the linted code (and the parser e.g. @typescript-eslint/parser or @babel/eslint-parser) that produced this error would help immensely. Otherwise we would need to guess what kind of code produced this which would take a lot more time to fix this issue.

You can detect the line of code that caused it by linting fewer files (similar to git-bisect) until you no longer receive that error.

[gaearon]

Where is this message coming from? I don’t think it’s ours. ESLint?

[LauraBeatris]

@eps1lon

The parser dependency is @typescript-eslint/parser@4.0.1

Line of code that caused the isse:

    <Member
	  {...}
      role={item?.role} // Accessing ``role`` property with optional chaining is raising the error
    />

The prop value is being accessed via optional chaining and that's what's throwing the error apparently. If I remove it item.role, the message disappears.

The type of the prop:

export enum MemberRoleEnum {
  CoHost = 'CO_HOST',
  Host = 'HOST',
  Member = 'MEMBER'
}

export interface FormattedFundMember extends BaseFlatListItem {
  role: MemberRoleEnum;
}

[LauraBeatris]

@gaearon As you said, I think the issue it's not related to React at all... Should be better to create the issue on the @typescript-eslint/parser repo?

I created it here because it started to appear on eslint-plugin-react-hooks@4.1.2

[junoatwork]

I also started seeing this output (upgrading an existing project).

The error string is coming from the jsx-ast-utils package used by eslint-plugin-react-hooks. The AST type ChainExpression is not supported in this list of node types https://github.com/jsx-eslint/jsx-ast-utils/blob/master/src/values/expressions/index.js#L24-L47 and will need to be added.

I'll open an issue on that repo; posting my findings here because this issue is currently the only searchable result.

[junoatwork]

This is fixed in jsx-ast-utils@3.0.0 jsx-eslint/jsx-ast-utils#102

[gaearon]

I don't think eslint-plugin-react-hooks depends on that package? Does it transitively?

[junoatwork]

eslint-plugin-react depends on jsx-ast-utils

[gaearon]

eslint-plugin-react has no relation to this repository. We're discussing eslint-plugin-react-hooks.

[LauraBeatris]

@gaearon It's strange because this output disappears when downgrading eslint-plugin-react-hooks

[gaearon]

In either case it seems like this is solved upstream so not actionable for us.

[ahsanplusplus]

This is fixed in jsx-ast-utils@3.0.0 jsx-eslint/jsx-ast-utils#102

It works well on my end. I appreciate

[Freddy-Gong]

run npx browserslist@latest --update-db can fix it.