prop-types failing to parse flow type annotations

[RobinClowers]

This presents in a very similar way to #1446, but it's happening in the prop-types rule, rather than no-unused-prop-types. It's related to flow type annotations, but unfortunately I don't have a good repro right now, I'll work on finding one. In the mean time, here it the stacktrace:

Cannot read property 'length' of undefined
TypeError: Cannot read property 'length' of undefined
    at iterateProperties (/node_modules/eslint-plugin-react/lib/rules/prop-types.js:343:21)
    at declarePropTypesForObjectTypeAnnotation (/node_modules/eslint-plugin-react/lib/rules/prop-types.js:702:7)
    at propTypes.types.some.annotation (/node_modules/eslint-plugin-react/lib/rules/prop-types.js:737:16)
    at Array.some (native)
    at declarePropTypesForIntersectionTypeAnnotation (/node_modules/eslint-plugin-react/lib/rules/prop-types.js:724:30)
    at markPropTypesAsDeclared (/node_modules/eslint-plugin-react/lib/rules/prop-types.js:818:35)
    at Object.ClassDeclaration (/node_modules/eslint-plugin-react/lib/rules/prop-types.js:943:11)
    at Linter.updatedRuleInstructions.(anonymous function) (/node_modules/eslint-plugin-react/lib/util/Components.js:654:75)
    at emitOne (events.js:101:20)
    at Linter.emit (events.js:188:7)
    at NodeEventGenerator.applySelector (/node_modules/eslint/lib/util/node-event-generator.js:265:26)
    at NodeEventGenerator.applySelectors (/node_modules/eslint/lib/util/node-event-generator.js:294:22)
    at NodeEventGenerator.enterNode (/node_modules/eslint/lib/util/node-event-generator.js:308:14)
    at CodePathAnalyzer.enterNode (/node_modules/eslint/lib/code-path-analysis/code-path-analyzer.js:602:23)
    at Traverser.enter (/node_modules/eslint/lib/linter.js:925:36)
    at Traverser.__execute (/node_modules/estraverse/estraverse.js:397:31)
    at Traverser.traverse (/node_modules/estraverse/estraverse.js:501:28)

[RobinClowers]

Here is a fairly small repro case. Removing the func function fixes this, as does removing Props & OP, so there may be two separate issues here?

// @flow
import * as React from 'react'

type Props = {}

const func = <OP: *>(arg) => arg

const hoc = <OP>() => () => {
  class Inner extends React.Component<Props & OP> {
    render() {
      return <div />
    }
  }
}

[ljharb]

What version of flow are you using? What's "OP"?

[RobinClowers]

I'm on flow 0.61, OP is a common abbreviation for "Own Props". This example is a bit confusing, because the hoc doesn't actually do anything. OP is commonly used with higher order components to denote the difference between props passed in props coming from redux or somewhere else.

[RobinClowers]

Oh, and I'm on eslint 4.4.1 and eslint-plugin-react v7.5.1.

[ruyasan]

I am experiencing the same issue - it appears to be caused by using type intersections (&) as part of the prop types definition.

[MoOx]

Seems like a dup of #1446

[ljharb]

Probably so; but I'd prefer to leave both open until we're sure :-)

[simenandresen]

Getting the same eslint-plugin-react error with this example:

type ReduxState = {bar: number};

const mapStateToProps = (state: ReduxState) => ({
    foo: state.bar,
})

// utility to extract the return type from a function
type ExtractReturn_<R, Fn: (...args: any[]) => R> = R;
type ExtractReturn<T> = ExtractReturn_<*, T>;

type PropsFromRedux = ExtractReturn<typeof mapStateToProps>;

type OwnProps = {
    baz: string,
}

// I want my Props to be {baz: string, foo: number}
type Props = PropsFromRedux & OwnProps;

const Component = (props. Props) => (
   <div>
       {props.baz}
       {props.foo}
   </div>
);