React-motion: Flow configuration errors?

[irvinebroque]

In an existing app using FlowType with React components, Adding react-motion causes a bunch of flow errors that point to react-motion internals. I'm guessing this is a configuration issue on my end, but it appears to me that flow is looking at the correct src/Types.js file for flow types.

Let me know if there's anything more that would be helpful to reproduce.

.flowconfig

[ignore]
.*node_modules/fbjs.*
.*/node_modules/babel-.*
.*/node_modules/react\(-dom\)?/.*

[include]

[libs]
interfaces/

[options]
module.name_mapper='^base64!.*' -> 'empty/object'
esproposal.class_static_fields=enable
esproposal.class_instance_fields=enable
suppress_comment= \\(.\\|\n\\)*\\$FlowFixMe

import { Motion, spring } from 'react-motion';

export default class MyComponent extends Component {

  render(): React.Element {
    return (
      <Motion defaultStyle={{x: 0}} style={{x: spring(1)}}>
        {(interpolatingStyle) => {
          return //...
       }}
    )
  }
}

node_modules/react-motion/src/TransitionMotion.js:36
 36:     return mergedPropsStyles.map((mergedPropsStyle, i) => ({
                ^ call of method `map`
 32:   plainStyles: Array<PlainStyle>,
                          ^^^^^^^^^^ object type. This type is incompatible with
 23: export type PlainStyle = {[key: string]: number};
                                              ^^^^^^ number. See: node_modules/react-motion/src/Types.js:23

node_modules/react-motion/src/TransitionMotion.js:36
 36:     return mergedPropsStyles.map((mergedPropsStyle, i) => ({
                ^ call of method `map`
 37:       key: mergedPropsStyle.key,
                ^^^^^^^^^^^^^^^^^^^^ string. This type is incompatible with
 23: export type PlainStyle = {[key: string]: number};
                                              ^^^^^^ number. See: node_modules/react-motion/src/Types.js:23

node_modules/react-motion/src/TransitionMotion.js:42
 42:   return mergedPropsStyles.map((mergedPropsStyle, i) => {
              ^ call of method `map`
 49:           key: unreadPropStyles[j].key,
                    ^^^^^^^^^^^^^^^^^^^^^^^ string. This type is incompatible with
 23: export type PlainStyle = {[key: string]: number};
                                              ^^^^^^ number. See: node_modules/react-motion/src/Types.js:23

node_modules/react-motion/src/TransitionMotion.js:42
 42:   return mergedPropsStyles.map((mergedPropsStyle, i) => {
              ^ call of method `map`
 56:     return {key: mergedPropsStyle.key, data: mergedPropsStyle.data, style: plainStyles[i]};
                      ^^^^^^^^^^^^^^^^^^^^ string. This type is incompatible with
 23: export type PlainStyle = {[key: string]: number};
                                              ^^^^^^ number. See: node_modules/react-motion/src/Types.js:23

node_modules/react-motion/src/TransitionMotion.js:44
 44:     for (let j = 0; j < unreadPropStyles.length; j++) {
                                              ^^^^^^ property `length`. Property cannot be accessed on possibly null value
 44:     for (let j = 0; j < unreadPropStyles.length; j++) {
                             ^^^^^^^^^^^^^^^^ null

node_modules/react-motion/src/TransitionMotion.js:44
 44:     for (let j = 0; j < unreadPropStyles.length; j++) {
                                              ^^^^^^ property `length`. Property cannot be accessed on possibly undefined value
 44:     for (let j = 0; j < unreadPropStyles.length; j++) {
                             ^^^^^^^^^^^^^^^^ undefined

node_modules/react-motion/src/TransitionMotion.js:46
 46:       if (unreadPropStyles[j].key === mergedPropsStyle.key) {
               ^^^^^^^^^^^^^^^^^^^ access of computed property/element. Computed property/element cannot be accessed on possibly null value
 46:       if (unreadPropStyles[j].key === mergedPropsStyle.key) {
               ^^^^^^^^^^^^^^^^ null

node_modules/react-motion/src/TransitionMotion.js:46
 46:       if (unreadPropStyles[j].key === mergedPropsStyle.key) {
               ^^^^^^^^^^^^^^^^^^^ access of computed property/element. Computed property/element cannot be accessed on possibly undefined value
 46:       if (unreadPropStyles[j].key === mergedPropsStyle.key) {
               ^^^^^^^^^^^^^^^^ undefined

node_modules/react-motion/src/TransitionMotion.js:154
154:       const velocity = mapToZero(newMergedPropsStyleCell.style);
                            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ function call
 50:   data?: any,
              ^^^ undefined. This type is incompatible with. See: node_modules/react-motion/src/Types.js:50
 26: export type Velocity = {[key: string]: number};
                                            ^^^^^^ number. See: node_modules/react-motion/src/Types.js:26

node_modules/react-motion/src/TransitionMotion.js:230
230:       oldMergedPropsStyles = defaultStyles.map(defaultStyleCell => {
                                  ^ call of method `map`
 20: export type Style = {[key: string]: number | OpaqueConfig};
                                                  ^^^^^^^^^^^^ object type. This type is incompatible with. See: node_modules/react-motion/src/Types.js:20
190:       style: PropTypes.objectOf(PropTypes.number).isRequired,
                                     ^^^^^^^^^^^^^^^^ number

node_modules/react-motion/src/TransitionMotion.js:248
248:       willEnter,
           ^^^^^^^^^ undefined. This type is incompatible with
107:   willEnter: WillEnter,
                  ^^^^^^^^^ function type

node_modules/react-motion/src/TransitionMotion.js:250
250:       willLeave,
           ^^^^^^^^^ undefined. This type is incompatible with
108:   willLeave: WillLeave,
                  ^^^^^^^^^ function type

node_modules/react-motion/src/TransitionMotion.js:283
283:       this.props.willEnter,
           ^^^^^^^^^^^^^^^^^^^^ undefined. This type is incompatible with
107:   willEnter: WillEnter,
                  ^^^^^^^^^ function type

node_modules/react-motion/src/TransitionMotion.js:285
285:       this.props.willLeave,
           ^^^^^^^^^^^^^^^^^^^^ undefined. This type is incompatible with
108:   willLeave: WillLeave,
                  ^^^^^^^^^ function type

node_modules/react-motion/src/TransitionMotion.js:386
386:         this.props.willEnter,
             ^^^^^^^^^^^^^^^^^^^^ undefined. This type is incompatible with
107:   willEnter: WillEnter,
                  ^^^^^^^^^ function type

node_modules/react-motion/src/TransitionMotion.js:388
388:         this.props.willLeave,
             ^^^^^^^^^^^^^^^^^^^^ undefined. This type is incompatible with
108:   willLeave: WillLeave,
                  ^^^^^^^^^ function type

node_modules/react-motion/src/TransitionMotion.js:486
486:       this.unreadPropStyles = props.styles(
                                   ^ call of method `styles`. Function cannot be called on
 59:   styles: Array<TransitionStyle> | (previousInterpolatedStyles: ?Array<TransitionPlainStyle>) => Array<TransitionStyle>,
               ^^^^^^^^^^^^^^^^^^^^^^ array type. See: node_modules/react-motion/src/Types.js:59

node_modules/react-motion/src/TransitionMotion.js:486
486:       this.unreadPropStyles = props.styles(
                                   ^ call of method `styles`
 49:   key: string,
            ^^^^^^ string. This type is incompatible with. See: node_modules/react-motion/src/Types.js:49
 23: export type PlainStyle = {[key: string]: number};
                                              ^^^^^^ number. See: node_modules/react-motion/src/Types.js:23

node_modules/react-motion/src/TransitionMotion.js:486
486:       this.unreadPropStyles = props.styles(
                                   ^ call of method `styles`
 52:   style: PlainStyle,
              ^^^^^^^^^^ object type. This type is incompatible with. See: node_modules/react-motion/src/Types.js:52
 23: export type PlainStyle = {[key: string]: number};
                                              ^^^^^^ number. See: node_modules/react-motion/src/Types.js:23


Found 19 errors

[chenglou]

Arrrrgggghhh I do recall these errors, and I do recall solving all of them. Which version of flow are you using?

[irvinebroque]

0.22, same errors on 0.21 as well.

[chenglou]

Eh, and I can't even get flow to recognize the types in react-motion when I created a new project just now. What incantation did you use?

[cdebotton]

Here is my flow config, works fine with 0.22.0

[ignore]
.*/react/node_modules/.*
.*/node_modules/babel-*/.*
.*/node_modules/babylon/.*
.*/node_modules/react/.*
.*/flow/include/.*

[include]
./src
../../node_modules/autobind-decorator
../../node_modules/react
../../node_modules/react-dom
../../node_modules/redux
../../node_modules/redux-logger
../../node_modules/react-motion
../../node_modules/react-select
../../node_modules/react-tap-event-plugin
../../node_modules/redux-thunk
../../node_modules/react-redux
../../node_modules/react-scrollbar
../../node_modules/express
../../node_modules/koa
../../node_modules/koa-jade
../../node_modules/koa-mount
../../node_modules/koa-proxy
../../node_modules/koa-static
../../node_modules/debug
../../node_modules/immutable
../../node_modules/invariant
../../node_modules/moment
../../node_modules/classnames
../../node_modules/isomorphic-fetch
../../node_modules/normalizr
../../node_modules/reselect
../../node_modules/warning
../../node_modules/humps
../../node_modules/empty
../../node_modules/raf
../../node_modules/performance-now

[libs]
./interfaces/

[options]
module.name_mapper='.*\(.css\)' -> 'empty/object'
esproposal.class_instance_fields=enable
esproposal.class_static_fields=enable
esproposal.decorators=ignore
module.system=haste
munge_underscores=true
strip_root=true
suppress_type=$FlowIssue
suppress_type=$FlowFixMe
suppress_type=$FixMe
suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(1[0-6]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*www[a-z,_]*\\)?)\\)
suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(1[0-6]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*www[a-z,_]*\\)?)\\)? #[0-9]+
suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy

[version]
0.22.0

I do, however, have issues with Flow 0.22.0 and React-Motion, since Flow no longer globally recognizes the ReactElement type, and it has to be imported explicitly from React. I've made a pull request here (https://github.com/chenglou/react-motion/pull/292) to correct those errors.

The ignores are relatively important, partially inspired by https://github.com/samwgoldman/issue-react-flow-setup. But ultimately, this allows us to declare Default Props, Props, and State like such:

import type { Element as ReactElement } from 'react';
type D = {}; // DefaultProps types
type P = { name: string; }; // Prop types
type S = {}; // State types

class MyComponent extends Component<D, P, S> {
  render(): ReactElement {
    return (
      <span>{this.props.name}</span>
    );
  }
}

[chenglou]

@cdebotton your PR is now in v0.4.3. I'm assuming these flow problems are all fixed now? @irvinebroque what about yours?

[irvinebroque]

Mine are fixed! 🎉

[vieks]

I installed the latest version 0.4.3 and still got this error.

To solve it I just put this line in _.flowconfig_ file:

[ignore]
.*/node_modules/react-motion/src/.*

So flow detects properly the react-motion import bindings and don't typecheck inside the internal reaction-motion code.