Flow: Required React prop allows `undefined`

[rsolomon]

Given the following React component definition:

class TestComponent extends React.Component {
  props: {
    label: string,
    value: string,
  };

  render(): React.Element<any> {
    const { label, value } = this.props; 
    return <span>{label}<em>value</em></span>;
  }
}

The following throws, as expected:

<TestComponent label="marklar" />

However, the following erroneously passes flow checks:

<TestComponent label="marklar" value={undefined} />

As does the following:

const props: { label?: string, value?: string } = {};  
<TestComponent {...props} />

[iainbeeston]

This also happens for union types that include void. For example, this throws no error even though it might result in an undefined prop value:

const stringUnionFn = function(x: string): (string | void) {
  return x.length > 5 ? x : undefined
}

/* ... */

<TestComponent label="marklar" value={stringUnionFn(3)} />

Whereas this does throw an error:

const numberUnionFn = function(x: number): (number | void) {
  return x > 5 ? x : undefined
}

/* ... */

<TestComponent label="marklar" value={numberUnionFn(3)} />

(Maybe types work correctly, as the return value is detected as possibly being null)

[nmn]

Seems like a bug in $Diff which is used for the types of a React Class.

[iainbeeston]

@nmn Do you think you could direct me to which file that's defined in? And if you have any ideas what might be causing the issue? I'm happy to work on a fix but I don't know the flow source well.

[ianobermiller]

Ouch, can we prioritize a fix for this? Just had some end-user errors due to a stray undefined :(

[rsolomon]

Fixed with [email protected]