Intersection Flow Type error

[dawidvdh]

Receiving the following error:

Cannot read property 'properties' of undefined
TypeError: Cannot read property 'properties' of undefined
    at annotation.types.reduce (/Users/proj/node_modules/eslint-plugin-react/lib/rules/default-props-match-prop-types.js:180:44)
    at Array.reduce (<anonymous>)
    at getPropertiesFromIntersectionTypeAnnotationNode (/Users/proj/node_modules/eslint-plugin-react/lib/rules/default-props-match-prop-types.js:173:31)
    at getPropTypesFromTypeAnnotation (/Users/proj/node_modules/eslint-plugin-react/lib/rules/default-props-match-prop-types.js:197:26)
    at Object.handleStatelessComponent (/Users/proj/node_modules/eslint-plugin-react/lib/rules/default-props-match-prop-types.js:331:42)
    at updatedRuleInstructions.(anonymous function) (/Users/proj/node_modules/eslint-plugin-react/lib/util/Components.js:666:75)
    at listeners.(anonymous function).forEach.listener (/Users/proj/node_modules/eslint/lib/util/safe-emitter.js:47:58)
    at Array.forEach (<anonymous>)
    at Object.emit (/Users/proj/node_modules/eslint/lib/util/safe-emitter.js:47:38)
    at NodeEventGenerator.applySelector (/Users/proj/node_modules/eslint/lib/util/node-event-generator.js:251:26)

When attempting to use intersection flow type like so:

import type { FieldProps } from "redux-form"

type Props = {
  label: string,
  type: string,
  options: Array<SelectOption>
} & FieldProps

I looked through previous issues and PR's and noticed similar issues however I am not sure if this has been resolved or not or if I am not doing this correctly.

Also I am using version 7.4.0 of this plugin.

[leethree]

I'm seeing the same issue since I enabled react/default-props-match-prop-types rule. The error goes away when I disable the rule.

[ryami333]

Hope this helps, these are my steps to reproduce:
This works:

// @flow

import React from 'react';
import type { ElementProps } from 'react';
import './button.scss';

type FooProps = ElementProps<'div'>;

function Foo(props: FooProps) {
    return (
        <div {...props} />
    );
}

export default Foo;

This errors (introduced additional prop 'bar'):

// @flow

import React from 'react';
import type { ElementProps } from 'react';
import './button.scss';

type FooProps = ElementProps<'div'> & {
	bar: string,
};

function Foo(props: FooProps) {
    return (
        <div {...props} />
    );
}

Foo.defaultProps = {
	bar: 'hello world',
}

export default Foo;

[ryami333]

Could be wrong, but seems related to this issue: #1413

[beaugunderson]

we're also hitting this; with the additional issue that the reference intersection type is made available from our .flowconfig's [libs] section as a declared type vs. being an imported one

update: I've imported the type and also changed whether the intersection is before or after the other defined props (e.g. Type & {} vs. {} & Type; those changes made no difference

we get the same error as the OP in default-props-match-prop-types.js; we're using eslint-plugin-react@7.40

[Morglod]

// @flow

type Opts = { name: string } & { kek: Function }

// eslint crash
function foo({ name }: Opts) {}

// no error
function foo(opts: Opts) {
    const { name } = opts;
}

eslint-react-plugin crashes when see union type destructuring

[justinanastos]

I created an MR with a failing test case and hopefully a resolution to this.

#1563

[ljharb]

Fixed in #1563