React-select: Imcompatible with Flow 0.99.0 and newer

[montogeek]

Hello! Sorry for removing the issue template.

I upgraded my project to Flow 0.99.0 from 0.98.1, and discovered that it throws new errors for this library.

Would you accept a PR fixing them?

It seems we hit this new feature from 0.99.0

Fix an issue where Flow would not catch certain errors involving React function components with unannotated props.

Errors:

Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ node_modules/react-select/src/Select.js:442:23

Cannot assign defaultComponents(...) to this.components because:
 • property children is missing in props [1] but exists in object type [2] in property Menu.
 • property innerRef is missing in props [1] but exists in object type [2] in property Menu.

     node_modules/react-select/src/Select.js
     439│     document.removeEventListener('scroll', this.onScroll, true);
     440│   }
     441│   cacheComponents = (components: SelectComponents) => {
     442│     this.components = defaultComponents({ components });
     443│   };
     444│   // ==============================
     445│   // Consumer Handlers

     node_modules/react-select/src/components/Menu.js
 [2] 225│ export type MenuProps = MenuAndPlacerCommon & {
     226│   /** Reference to the internal element, consumed by the MenuPlacer component */
     227│   innerRef: ElementRef<*>,
     228│   /** The children to be rendered. */
     229│   children: ReactElement<*>,
     230│ };

     node_modules/react-select/src/components/index.js
 [1]  64│   Menu: ComponentType<MenuProps>,


Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ node_modules/react-select/src/animated/MultiValue.js:12:10

Cannot return function because:
 • property in is missing in props [1].
 • property onExited is missing in props [1].

      9│ const AnimatedMultiValue = (
     10│   WrappedComponent: AbstractComponent<MultiValueProps>
 [1] 11│ ): AbstractComponent<MultiValueProps> => {
     12│   return ({ in: inProp, onExited, ...props }) => (
     13│     <Collapse in={inProp} onExited={onExited}>
     14│       <WrappedComponent cropWithEllipsis={inProp} {...props} />
     15│     </Collapse>
     16│   );
     17│ };
     18│
     19│ export default AnimatedMultiValue;


Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ node_modules/react-select/src/animated/Placeholder.js:11:4

Cannot create Fade element because:
 • property in is missing in props [1] but exists in BaseTransition [2].
 • property onExited is missing in props [1] but exists in BaseTransition [2].

     node_modules/react-select/src/animated/Placeholder.js
      8│ const AnimatedPlaceholder = (
      9│   WrappedComponent: AbstractComponent<PlaceholderProps>
     10│ ): AbstractComponent<PlaceholderProps> => (props) => (
 [1] 11│   <Fade
     12│     component={WrappedComponent}
     13│     duration={props.isMulti ? collapseDuration : 1}
     14│     {...props}
     15│   />
     16│ );
     17│
     18│ export default AnimatedPlaceholder;

     node_modules/react-select/src/animated/transitions.js
 [2] 18│ type FadeProps = BaseTransition & {


Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ node_modules/react-select/src/animated/SingleValue.js:12:4

Cannot create Fade element because:
 • property duration is missing in props [1] but exists in object type [2].
 • property in is missing in props [1] but exists in BaseTransition [3].
 • property onExited is missing in props [1] but exists in BaseTransition [3].

        node_modules/react-select/src/animated/SingleValue.js
         9│ const AnimatedSingleValue = (
        10│   WrappedComponent: AbstractComponent<SingleValueProps>
        11│ ): AbstractComponent<SingleValueProps> => (props) => (
    [1] 12│   <Fade component={WrappedComponent} {...props} />
        13│ );
        14│
        15│ export default AnimatedSingleValue;

        node_modules/react-select/src/animated/transitions.js
 [3][2] 18│ type FadeProps = BaseTransition & {
        19│   component: ComponentType<any>,
        20│   duration: number,
        21│ };


Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ node_modules/react-select/src/animated/index.js:14:10

Cannot return object literal because:
 • property children is missing in props [1] but exists in object type [2] in property Menu.
 • property innerRef is missing in props [1] but exists in object type [2] in property Menu.

     node_modules/react-select/src/animated/index.js
      11│ const makeAnimated = (externalComponents?: SelectComponents= {}): SelectComponents => {
      12│   const components = defaultComponents({ components: externalComponents });
      13│   const { Input, MultiValue, Placeholder, SingleValue, ValueContainer, ...rest } = components;
      14│   return {
      15│     Input: AnimatedInput(Input),
      16│     MultiValue: AnimatedMultiValue(MultiValue),
      17│     Placeholder: AnimatedPlaceholder(Placeholder),
      18│     SingleValue: AnimatedSingleValue(SingleValue),
      19│     ValueContainer: AnimatedValueContainer(ValueContainer),
      20│     ...rest,
      21│   };
      22│ };
      23│
      24│ const AnimatedComponents = makeAnimated();

     node_modules/react-select/src/components/Menu.js
 [2] 225│ export type MenuProps = MenuAndPlacerCommon & {
     226│   /** Reference to the internal element, consumed by the MenuPlacer component */
     227│   innerRef: ElementRef<*>,
     228│   /** The children to be rendered. */
     229│   children: ReactElement<*>,
     230│ };

     node_modules/react-select/src/components/index.js
 [1]  64│   Menu: ComponentType<MenuProps>,

[gwyneplaine]

@montogeek would deeply appreciate a PR to fix this, thanks for raising the issue

[breadadams]

In case it helps anyone - we've recently ran into this on a project were integrating the react-select library, and as a temporary fix added the following to the .flowconfig:

[ignore]
.*/node_modules/react-select/.*

However this results in another error where importing the library:

Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ src/components/Select/index.js:3:44

Cannot resolve module react-select.

     1│ // @flow
     2│ import React from 'react';
     3│ import Select from 'react-select';

So in addition to the above, mark the import line with $FlowFixMe (all this until #3626 is resolved).

[ben-sigsci]

Further to @breadadams comment, we've found that using untyped in our .flowconfig is working well and doesn't require the additional $FlowFixMe's:

[untyped]
<PROJECT_ROOT>/node_modules/react-select/*

https://flow.org/en/docs/config/untyped/

[bladey]

Further details at #3804 and #3816

[bladey]

It appears this will be resolved when PR #3626 is merged.