Flow configuration errors?

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

[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.

[irvinebroque]

Mine are fixed! 🎉