TypeError: Cannot read property 'type' of undefined

[Paperfeed]

eslint-plugin-react v7.20.6 causes the following error:

ESLint: 7.6.0   (or 7.9.0)

TypeError: Cannot read property 'type' of undefined
Occurred while linting /path-to-file/Component.tsx:101
    at Object.isRequiredPropType (/node_modules/eslint-plugin-react/lib/util/props.js:91:29)
    at /node_modules/eslint-plugin-react/lib/util/propTypes.js:669:54
    at iterateProperties (/node_modules/eslint-plugin-react/lib/util/propTypes.js:64:7)
    at /node_modules/eslint-plugin-react/lib/util/propTypes.js:664:23
    at Array.forEach (<anonymous>)
    at DeclarePropTypesForTSTypeAnnotation.convertReturnTypeToPropTypes (/node_modules/eslint-plugin-react/lib/util/propTypes.js:653:34)
    at DeclarePropTypesForTSTypeAnnotation.searchDeclarationByName (/node_modules/eslint-plugin-react/lib/util/propTypes.js:562:14)
    at DeclarePropTypesForTSTypeAnnotation.visitTSNode (/node_modules/eslint-plugin-react/lib/util/propTypes.js:517:14)
    at DeclarePropTypesForTSTypeAnnotation.traverseDeclaredInterfaceOrTypeAlias (/node_modules/eslint-plugin-react/lib/util/propTypes.js:610:14)
    at Array.forEach (<anonymous>)

At propTypes.js it goes into the switch case for 'ObjectExpression'

switch (res.type) {
    case 'ObjectExpression':
        iterateProperties(context, res.properties, (key, value, propNode) => {
            const types = buildReactDeclarationTypes(value, key);
            types.fullName = key;
            types.name = key;
            types.node = propNode;
            types.isRequired = propsUtil.isRequiredPropType(value);
            this.declaredPropTypes[key] = types;
        });
        break;
    default:
}

with the following values:

┌───────────────┬──────────┬──────────┬──────────┬──────────┬──────────┬──────────┬──────────────────────┬─────────┬────────────────────┬─────────────────┬──────────┬──────────────────┬────────────────────────────────────┬──────────┬───────────┐
│    (index)    │    0     │    1     │    2     │    3     │    4     │    5     │          id          │ options │       report       │      type       │ argument │      range       │                loc                 │  parent  │  Values   │
├───────────────┼──────────┼──────────┼──────────┼──────────┼──────────┼──────────┼──────────────────────┼─────────┼────────────────────┼─────────────────┼──────────┼──────────────────┼────────────────────────────────────┼──────────┼───────────┤
│    context    │          │          │          │          │          │          │ 'react/display-name' │   []    │ [Function: report] │                 │          │                  │                                    │          │           │
│ resProperties │ [Object] │ [Object] │ [Object] │ [Object] │ [Object] │ [Object] │                      │         │                    │                 │          │                  │                                    │          │           │
│      key      │          │          │          │          │          │          │                      │         │                    │                 │          │                  │                                    │          │ undefined │
│     value     │          │          │          │          │          │          │                      │         │                    │                 │          │                  │                                    │          │ undefined │
│   propNode    │          │          │          │          │          │          │                      │         │                    │ 'SpreadElement' │ [Object] │ [ 13283, 13358 ] │ { start: [Object], end: [Object] } │ [Object] │           │
└───────────────┴──────────┴──────────┴──────────┴──────────┴──────────┴──────────┴──────────────────────┴─────────┴────────────────────┴─────────────────┴──────────┴──────────────────┴────────────────────────────────────┴──────────┴───────────┘

Which fails because the function isRequiredPropType fis called with value which is undefined
It seems to do with the TypeScript parsing in convertReturnTypeToPropTypes(node)

Now, one solution would be to simply change the isRequiredPropType function to return false when undefined is passed, like so:

function isRequiredPropType(propTypeExpression) {
  return propTypeExpression && propTypeExpression.type === 'MemberExpression' && propTypeExpression.property.name === 'isRequired';
}

But I am not entirely sure if there is an underlying problem that caused this issue. From what I can tell this component somehow hit an edge case. The component in question is a function component which is wrapped in a Redux connect() to connect to the translations state.

If the above solution is acceptable I can create a pull request for it, but otherwise I would either need to find time to look into it, or let someone more familiar with the project find the solution :)

[ljharb]

What's the code being linted that causes this?

[Paperfeed]

I've narrowed down the issue to the way the types for DispatchProps are being generated from the ReturnType of mapDispatchToProps.

We have a component as follows:

type ConnectedProps = DispatchProps &
  StateProps

const Component = ({ prop1, prop2, prop3 }: ConnectedProps) => {
  // Do stuff
  return (
    <StyledComponent>...</StyledComponent>
  )
}

const mapDispatchToProps = (dispatch: ThunkDispatch<State, null, Action>) => ({
  ...bindActionCreators(
    { prop1: importedAction, prop2: anotherImportedAction },
    dispatch,
  ),
})

const mapStateToProps = (state: State) => ({
  prop3: Selector.value(state),
})

type StateProps = ReturnType<typeof mapStateToProps>
type DispatchProps = ReturnType<typeof mapDispatchToProps>

If I comment out type DispatchProps = ReturnType<typeof mapDispatchToProps> or manually define it, the error disappears

Unfortunately I can't share the original code, as it is proprietary.

[hank121314]

Sorry for this issue and thank you for your investigation!
I have made a pr #2802 .
Can you help me to test whether it works?
Thanks!