[email protected] breaks flow-typed support for react related libraries

Created on 16 Aug 2017 · 10Comments · Source: facebook/flow

After upgrade to 0.53 flow check does output like:

[No file]:0
inconsistent use of library definitions
 27:   declare class ReactCSSTransitionGroup extends React$Component<DefaultProps, Props, any> {
                                                                     ^^^^^^^^^^^^ object type. This type is incompatible with. See lib: flow-typed/npm/react-addons-css
-transition-group_v15.x.x.js:27
 28:     props: Props;
                ^^^^^ object type. See lib: flow-typed/npm/react-addons-css-transition-group_v15.x.x.js:28
  Property `transitionAppear` is incompatible:
     15:     transitionAppear?: boolean,
                                ^^^^^^^ undefined. This type is incompatible with. See lib: flow-typed/npm/react-addons-css-transition-group_v15.x.x.js:15
     23:     transitionAppear: boolean,
                               ^^^^^^^ boolean. See lib: flow-typed/npm/react-addons-css-transition-group_v15.x.x.js:23

[No file]:0
inconsistent use of library definitions
 27:   declare class ReactCSSTransitionGroup extends React$Component<DefaultProps, Props, any> {
                                                                     ^^^^^^^^^^^^ object type. This type is incompatible with. See lib: flow-typed/npm/react-addons-css
-transition-group_v15.x.x.js:27
 28:     props: Props;
                ^^^^^ object type. See lib: flow-typed/npm/react-addons-css-transition-group_v15.x.x.js:28
  Property `transitionEnter` is incompatible:
     16:     transitionEnter?: boolean,
                               ^^^^^^^ undefined. This type is incompatible with. See lib: flow-typed/npm/react-addons-css-transition-group_v15.x.x.js:16
     24:     transitionEnter: boolean,
                              ^^^^^^^ boolean. See lib: flow-typed/npm/react-addons-css-transition-group_v15.x.x.js:24

[No file]:0
inconsistent use of library definitions
 27:   declare class ReactCSSTransitionGroup extends React$Component<DefaultProps, Props, any> {
                                                                     ^^^^^^^^^^^^ object type. This type is incompatible with. See lib: flow-typed/npm/react-addons-css
-transition-group_v15.x.x.js:27
 28:     props: Props;
                ^^^^^ object type. See lib: flow-typed/npm/react-addons-css-transition-group_v15.x.x.js:28
  Property `transitionLeave` is incompatible:
     17:     transitionLeave?: boolean,
                               ^^^^^^^ undefined. This type is incompatible with. See lib: flow-typed/npm/react-addons-css-transition-group_v15.x.x.js:17
     25:     transitionLeave: boolean,
                              ^^^^^^^ boolean. See lib: flow-typed/npm/react-addons-css-transition-group_v15.x.x.js:25

[No file]:0
inconsistent use of library definitions
 28:     props: Props;
                ^^^^^ object type. This type is incompatible with. See lib: flow-typed/npm/react-addons-css-transition-group_v15.x.x.js:28
 27:   declare class ReactCSSTransitionGroup extends React$Component<DefaultProps, Props, any> {
                                                                     ^^^^^^^^^^^^ object type. See lib: flow-typed/npm/react-addons-css-transition-group_v15.x.x.js:27
  Property `transitionAppear` is incompatible:
     15:     transitionAppear?: boolean,
                                ^^^^^^^ undefined. This type is incompatible with. See lib: flow-typed/npm/react-addons-css-transition-group_v15.x.x.js:15
     23:     transitionAppear: boolean,
                               ^^^^^^^ boolean. See lib: flow-typed/npm/react-addons-css-transition-group_v15.x.x.js:23

[No file]:0
inconsistent use of library definitions
 28:     props: Props;
                ^^^^^ object type. This type is incompatible with. See lib: flow-typed/npm/react-addons-css-transition-group_v15.x.x.js:28
 27:   declare class ReactCSSTransitionGroup extends React$Component<DefaultProps, Props, any> {
                                                                     ^^^^^^^^^^^^ object type. See lib: flow-typed/npm/react-addons-css-transition-group_v15.x.x.js:27
  Property `transitionEnter` is incompatible:
     16:     transitionEnter?: boolean,
                               ^^^^^^^ undefined. This type is incompatible with. See lib: flow-typed/npm/react-addons-css-transition-group_v15.x.x.js:16
     24:     transitionEnter: boolean,
                              ^^^^^^^ boolean. See lib: flow-typed/npm/react-addons-css-transition-group_v15.x.x.js:24

[No file]:0
inconsistent use of library definitions
 28:     props: Props;
                ^^^^^ object type. This type is incompatible with. See lib: flow-typed/npm/react-addons-css-transition-group_v15.x.x.js:28
 27:   declare class ReactCSSTransitionGroup extends React$Component<DefaultProps, Props, any> {
                                                                     ^^^^^^^^^^^^ object type. See lib: flow-typed/npm/react-addons-css-transition-group_v15.x.x.js:27
  Property `transitionLeave` is incompatible:
     17:     transitionLeave?: boolean,
                               ^^^^^^^ undefined. This type is incompatible with. See lib: flow-typed/npm/react-addons-css-transition-group_v15.x.x.js:17
     25:     transitionLeave: boolean,
                              ^^^^^^^ boolean. See lib: flow-typed/npm/react-addons-css-transition-group_v15.x.x.js:25

[No file]:0
inconsistent use of library definitions
 28:     props: Props;
                ^^^^^ property `transitionAppearTimeout`. Property not found in. See lib: flow-typed/npm/react-addons-css-transition-group_v15.x.x.js:28
 27:   declare class ReactCSSTransitionGroup extends React$Component<DefaultProps, Props, any> {
                                                                     ^^^^^^^^^^^^ object type. See lib: flow-typed/npm/react-addons-css-transition-group_v15.x.x.js:27

[No file]:0
inconsistent use of library definitions
 28:     props: Props;
                ^^^^^ property `transitionEnterTimeout`. Property not found in. See lib: flow-typed/npm/react-addons-css-transition-group_v15.x.x.js:28
 27:   declare class ReactCSSTransitionGroup extends React$Component<DefaultProps, Props, any> {
                                                                     ^^^^^^^^^^^^ object type. See lib: flow-typed/npm/react-addons-css-transition-group_v15.x.x.js:27

[No file]:0
inconsistent use of library definitions
 28:     props: Props;
                ^^^^^ property `transitionLeaveTimeout`. Property not found in. See lib: flow-typed/npm/react-addons-css-transition-group_v15.x.x.js:28
 27:   declare class ReactCSSTransitionGroup extends React$Component<DefaultProps, Props, any> {
                                                                     ^^^^^^^^^^^^ object type. See lib: flow-typed/npm/react-addons-css-transition-group_v15.x.x.js:27

[No file]:0
inconsistent use of library definitions
 28:     props: Props;
                ^^^^^ property `transitionName`. Property not found in. See lib: flow-typed/npm/react-addons-css-transition-group_v15.x.x.js:28
 27:   declare class ReactCSSTransitionGroup extends React$Component<DefaultProps, Props, any> {
                                                                     ^^^^^^^^^^^^ object type. See lib: flow-typed/npm/react-addons-css-transition-group_v15.x.x.js:27

[No file]:0
inconsistent use of library definitions
 22: declare class DndComponent<C, D, P, S> extends React$Component<D, P, S> {
                                   ^ D. This type is incompatible with. See lib: flow-typed/npm/react-dnd_v2.x.x.js:22
     v-------------------------------------------------------------------------
 22: declare class DndComponent<C, D, P, S> extends React$Component<D, P, S> {
 23:   static defaultProps: D;
 24:   props: P;
...:
 30: }
     ^ some incompatible instantiation of `P`. See lib: flow-typed/npm/react-dnd_v2.x.x.js:22

[No file]:0
inconsistent use of library definitions
 22: declare class DndComponent<C, D, P, S> extends React$Component<D, P, S> {
                                      ^ P. This type is incompatible with. See lib: flow-typed/npm/react-dnd_v2.x.x.js:22
     v-------------------------------------------------------------------------
 22: declare class DndComponent<C, D, P, S> extends React$Component<D, P, S> {
 23:   static defaultProps: D;
 24:   props: P;
...:
 30: }
     ^ some incompatible instantiation of `D`. See lib: flow-typed/npm/react-dnd_v2.x.x.js:22

[No file]:0
inconsistent use of library definitions
 22: declare class DndComponent<C, D, P, S> extends React$Component<D, P, S> {
                                      ^ P. This type is incompatible with. See lib: flow-typed/npm/react-dnd_v2.x.x.js:22
     v-------------------------------------------------------------------------
 22: declare class DndComponent<C, D, P, S> extends React$Component<D, P, S> {
 23:   static defaultProps: D;
 24:   props: P;
...:
 30: }
     ^ some incompatible instantiation of `S`. See lib: flow-typed/npm/react-dnd_v2.x.x.js:22

[No file]:0
inconsistent use of library definitions
 22: declare class DndComponent<C, D, P, S> extends React$Component<D, P, S> {
                                         ^ S. This type is incompatible with. See lib: flow-typed/npm/react-dnd_v2.x.x.js:22
     v-------------------------------------------------------------------------
 22: declare class DndComponent<C, D, P, S> extends React$Component<D, P, S> {
 23:   static defaultProps: D;
 24:   props: P;
...:
 30: }
     ^ some incompatible instantiation of `P`. See lib: flow-typed/npm/react-dnd_v2.x.x.js:22

[No file]:0
inconsistent use of library definitions
 32: declare class ContextComponent<C, D, P, S> extends React$Component<D, P, S> {
                                       ^ D. This type is incompatible with. See lib: flow-typed/npm/react-dnd_v2.x.x.js:32
     v-----------------------------------------------------------------------------
 32: declare class ContextComponent<C, D, P, S> extends React$Component<D, P, S> {
 33:   static defaultProps: D;
 34:   props: P;
...:
 41: }
     ^ some incompatible instantiation of `P`. See lib: flow-typed/npm/react-dnd_v2.x.x.js:32

[No file]:0
inconsistent use of library definitions
 32: declare class ContextComponent<C, D, P, S> extends React$Component<D, P, S> {
                                          ^ P. This type is incompatible with. See lib: flow-typed/npm/react-dnd_v2.x.x.js:32
     v-----------------------------------------------------------------------------
 32: declare class ContextComponent<C, D, P, S> extends React$Component<D, P, S> {
 33:   static defaultProps: D;
 34:   props: P;
...:
 41: }
     ^ some incompatible instantiation of `D`. See lib: flow-typed/npm/react-dnd_v2.x.x.js:32

[No file]:0
inconsistent use of library definitions
 32: declare class ContextComponent<C, D, P, S> extends React$Component<D, P, S> {
                                          ^ P. This type is incompatible with. See lib: flow-typed/npm/react-dnd_v2.x.x.js:32
     v-----------------------------------------------------------------------------
 32: declare class ContextComponent<C, D, P, S> extends React$Component<D, P, S> {
 33:   static defaultProps: D;
 34:   props: P;
...:
 41: }
     ^ some incompatible instantiation of `S`. See lib: flow-typed/npm/react-dnd_v2.x.x.js:32

[No file]:0
inconsistent use of library definitions
 32: declare class ContextComponent<C, D, P, S> extends React$Component<D, P, S> {
                                             ^ S. This type is incompatible with. See lib: flow-typed/npm/react-dnd_v2.x.x.js:32
     v-----------------------------------------------------------------------------
 32: declare class ContextComponent<C, D, P, S> extends React$Component<D, P, S> {
 33:   static defaultProps: D;
 34:   props: P;
...:
 41: }
     ^ some incompatible instantiation of `P`. See lib: flow-typed/npm/react-dnd_v2.x.x.js:32

[No file]:0
inconsistent use of library definitions
 28:   declare class ConnectedComponent<OP, P, Def, St> extends React$Component<void, OP, void> {
                                        ^^ OP. This type is incompatible with. See lib: flow-typed/npm/react-redux_v5.x.x.js:28
 28:   declare class ConnectedComponent<OP, P, Def, St> extends React$Component<void, OP, void> {
                                                                                ^^^^ undefined. See lib: flow-typed/npm/react-redux_v5.x.x.js:28

[No file]:0
inconsistent use of library definitions
 28:   declare class ConnectedComponent<OP, P, Def, St> extends React$Component<void, OP, void> {
                                        ^^ OP. This type is incompatible with. See lib: flow-typed/npm/react-redux_v5.x.x.js:28
 33:     state: void;
                ^^^^ undefined. See lib: flow-typed/npm/react-redux_v5.x.x.js:33

[No file]:0
inconsistent use of library definitions
 28:   declare class ConnectedComponent<OP, P, Def, St> extends React$Component<void, OP, void> {
                                                                                ^^^^ undefined. This type is incompatible with. See lib: flow-typed/npm/react-redux_v5.
x.x.js:28
       v------------------------------------------------------------------------------------------
 28:   declare class ConnectedComponent<OP, P, Def, St> extends React$Component<void, OP, void> {
 29:     static WrappedComponent: Class<React$Component<Def, P, St>>;
 30:     getWrappedInstance(): React$Component<Def, P, St>;
...:
 34:   }
       ^ some incompatible instantiation of `OP`. See lib: flow-typed/npm/react-redux_v5.x.x.js:28

[No file]:0
inconsistent use of library definitions
 33:     state: void;
                ^^^^ undefined. This type is incompatible with. See lib: flow-typed/npm/react-redux_v5.x.x.js:33
       v------------------------------------------------------------------------------------------
 28:   declare class ConnectedComponent<OP, P, Def, St> extends React$Component<void, OP, void> {
 29:     static WrappedComponent: Class<React$Component<Def, P, St>>;
 30:     getWrappedInstance(): React$Component<Def, P, St>;
...:
 34:   }
       ^ some incompatible instantiation of `OP`. See lib: flow-typed/npm/react-redux_v5.x.x.js:28

Library type error:
flow-typed/npm/enzyme_v2.3.x.js:7
  7:   declare type EnzymeSelector = string | ReactClass<any> | Object;
                                              ^^^^^^^^^^^^^^^ identifier `ReactClass`. Could not resolve name

Library type error:
flow-typed/npm/react-addons-css-transition-group_v15.x.x.js:27
 27:   declare class ReactCSSTransitionGroup extends React$Component<DefaultProps, Props, any> {
                                                     ^^^^^^^^^^^^^^^ type application of identifier `React$Component`. Too many type arguments. Expected at most 2
 29: declare class React$Component<Props, State = void> {
                                   ^^^^^^^^^^^^ See type parameters of definition here. See lib: C:\Users\Philipp\AppData\Local\Temp\flow\flowlib_cb255aa\react.js:29

Library type error:
flow-typed/npm/react-dnd_v2.x.x.js:22
 22: declare class DndComponent<C, D, P, S> extends React$Component<D, P, S> {
                                                    ^^^^^^^^^^^^^^^ type application of identifier `React$Component`. Too many type arguments. Expected at most 2
 29: declare class React$Component<Props, State = void> {
                                   ^^^^^^^^^^^^ See type parameters of definition here. See lib: temp\flow\flowlib_cb255aa\react.js:29

Library type error:
flow-typed/npm/react-modal_v1.x.x.js:24
 24:   declare class Modal extends React$Component {
                                   ^^^^^^^^^^^^^^^ identifier `React$Component`. Too few type arguments. Expected at least 1
 29: declare class React$Component<Props, State = void> {
                                   ^^^^^^^^^^^^ See type parameters of definition here. See lib: temp\flow\flowlib_cb255aa\react.js:29

Library type error:
flow-typed/npm/react-redux_v5.x.x.js:28
 28:   declare class ConnectedComponent<OP, P, Def, St> extends React$Component<void, OP, void> {
                                                                ^^^^^^^^^^^^^^^ type application of identifier `React$Component`. Too many type arguments. Expected at
 most 2
 29: declare class React$Component<Props, State = void> {
                                   ^^^^^^^^^^^^ See type parameters of definition here. See lib:

Source

philipp-sorin

👍18

Most helpful comment

The biggest change we are making is to modify how you define React class components. From version 0.53.0 and on, the React.Component class will take two type arguments, Props and State (as opposed to the three type arguments including DefaultProps that React.Component took before)
Took it from here https://medium.com/flow-type/even-better-support-for-react-in-flow-25b0a3485627

Y-Taras on 16 Aug 2017

👍8 🎉4 ❤1

All 10 comments

Same thing.
[No file]:0 inconsistent use of library definitions 27: declare class ReactCSSTransitionGroup extends React$Component<DefaultProps, Props, any> { ^^^^^^^^^^^^ object type. This type is incompatible with. See lib: flow-typed/npm/react-addons-css-transition-group_v15.x.x.js:27 28: props: Props; ^^^^^ object type. See lib: flow-typed/npm/react-addons-css-transition-group_v15.x.x.js:28 ..................
I guess I should downgrade to previous version. It's weird that no one else got issue's like that

Y-Taras on 16 Aug 2017

It's weird that no one else got issue's like that

As soon as I upgraded to 0.53, pretty much everything broke. It looks like the "DefaultProps" parameterized type disappeared.

Its still documented here, so not sure if this change is by design.

https://flow.org/en/docs/frameworks/react/#toc-explicitly-specifying-react-component-generics

onehorsetown on 16 Aug 2017

The biggest change we are making is to modify how you define React class components. From version 0.53.0 and on, the React.Component class will take two type arguments, Props and State (as opposed to the three type arguments including DefaultProps that React.Component took before)
Took it from here https://medium.com/flow-type/even-better-support-for-react-in-flow-25b0a3485627

Y-Taras on 16 Aug 2017

👍8 🎉4 ❤1

Have you tried using the flow-upgrade codemod to fix the errors? its mentioned in the blog post: https://medium.com/flow-type/even-better-support-for-react-in-flow-25b0a3485627

jbrown215 on 16 Aug 2017

Yes flow-upgrade codemod had found 3 files and it didn't changed anything. And it seems like flow-typed folder it didn't touch. Now I just back to 0.52 version and everything works no errors. May be I'll upgrade later

Y-Taras on 16 Aug 2017

cc @calebmer

jbrown215 on 16 Aug 2017

👍

mingvase on 18 Aug 2017

just a comment I have same issue with flow v0.49 and "react": "16.0.0-alpha.12" and : "react-native": "0.47.1"

afattahi54 on 21 Aug 2017

Yep, we need to upgrade all of the types in flow-typed to Flow v0.53! You can manually upgrade your types locally and I encourage you to contribute your changes back to flow-typed 😄

calebmer on 27 Aug 2017

👍1

I started to try to fix this problem for [email protected], but just adding the props parameters doesn't seem to work. Is there some different notation used in the libdef file? I looked for documentation on this format but I must have missed it on the flow type webpage.

Specifically, I tried to change this:

  declare export class BrowserRouter extends React$Component {
    props: {
      basename?: string,
      forceRefresh?: boolean,
      getUserConfirmation?: GetUserConfirmation,
      keyLength?: number,
      children?: React$Element<*>
    };
  }

to this:

  declare type BrowserRouterTestProps = {
    basename?: string,
    forceRefresh?: boolean,
    getUserConfirmation?: GetUserConfirmation,
    keyLength?: number,
    children?: React$Element<*>
  };
  declare export class BrowserRouterTest extends React$Component<BrowserRouterTestProps> {}

But flow 57 still compains:

Library type error:
../flow-typed/npm/react-router-dom_v4.x.x.js:12
 12:   declare export class BrowserRouterTest extends React$Component<BrowserRouterTestProps> {}
                                                      ^^^^^^^^^^^^^^^ identifier `React$Component`. Too few type arguments. Expected at least 1
 26: declare class React$Component<Props, State = void> {
                                   ^^^^^^^^^^^^ See type parameters of definition here. See lib: /private/tmp/flow/flowlib_3ab20de2/react.js:26

This is the same error the first block of code gives once you upgrade out of flow 52.