Flow: Any way to deal with node_modules dependencies errors

[rajat1saxena]

Everytime I try to upgrade to latest version of flow, I get a new set of errors. This time I upgraded from 0.57.2 to 0.61.0 and following are the new errors I'm getting:

yarn run v1.3.2
$ flow
Error: node_modules/react-native/Libraries/Animated/src/Easing.js:65
 65:   static step0(n) {
                    ^ n. Missing annotation

Error: node_modules/react-native/Libraries/Animated/src/Easing.js:72
 72:   static step1(n) {
                    ^ n. Missing annotation

Error: node_modules/react-native/Libraries/Animated/src/Easing.js:82
 82:   static linear(t) {
                     ^ t. Missing annotation

Error: node_modules/react-native/Libraries/Animated/src/Easing.js:105
105:   static quad(t) {
                   ^ t. Missing annotation

Error: node_modules/react-native/Libraries/Animated/src/Easing.js:115
115:   static cubic(t) {
                    ^ t. Missing annotation

Error: node_modules/react-native/Libraries/Animated/src/Easing.js:125
125:   static poly(n) {
                   ^ n. Missing annotation

Error: node_modules/react-native/Libraries/Animated/src/Easing.js:126
126:     return (t) => Math.pow(t, n);
                 ^ t. Missing annotation

Error: node_modules/react-native/Libraries/Animated/src/Easing.js:134
134:   static sin(t) {
                  ^ t. Missing annotation

Error: node_modules/react-native/Libraries/Animated/src/Easing.js:143
143:   static circle(t) {
                     ^ t. Missing annotation

Error: node_modules/react-native/Libraries/Animated/src/Easing.js:152
152:   static exp(t) {
                  ^ t. Missing annotation

Error: node_modules/react-native/Libraries/CameraRoll/CameraRoll.js:258
258:   static getPhotos(params) {
                        ^^^^^^ params. Missing annotation

Error: node_modules/react-native/Libraries/Components/ScrollResponder.js:477
477:       var { animated, ...rect } = rect;
                           ^^^^^^^ rect. This type is incompatible with
472:     rect: { x: number, y: number, width: number, height: number, animated?: boolean },
               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ object type
  Property `animated` is incompatible:
    472:     rect: { x: number, y: number, width: number, height: number, animated?: boolean },
                   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ property `animated`. Property not found in
    477:       var { animated, ...rect } = rect;
                               ^^^^^^^ rect

Error: node_modules/react-native/Libraries/Share/Share.js:114
114:   static get sharedAction() { return 'sharedAction'; }
                                ^ return. Missing annotation

Error: node_modules/react-native/Libraries/Share/Share.js:120
120:   static get dismissedAction() { return 'dismissedAction'; }
                                   ^ return. Missing annotation

Error: node_modules/react-native/Libraries/StyleSheet/StyleSheetValidation.js:27
 27:   static validateStyleProp(prop, style, caller) {
                                ^^^^ prop. Missing annotation

Error: node_modules/react-native/Libraries/StyleSheet/StyleSheetValidation.js:27
 27:   static validateStyleProp(prop, style, caller) {
                                      ^^^^^ style. Missing annotation

Error: node_modules/react-native/Libraries/StyleSheet/StyleSheetValidation.js:27
 27:   static validateStyleProp(prop, style, caller) {
                                             ^^^^^^ caller. Missing annotation

Error: node_modules/react-native/Libraries/StyleSheet/StyleSheetValidation.js:62
 62:   static validateStyle(name, styles) {
                            ^^^^ name. Missing annotation

Error: node_modules/react-native/Libraries/StyleSheet/StyleSheetValidation.js:62
 62:   static validateStyle(name, styles) {
                                  ^^^^^^ styles. Missing annotation


Found 19 errors
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I tried fixing it with adding to following to .flowconfig's [ignore] category but then flow starts giving bunch of react-native: Required module not found errors.

; Ignore react native libraries as it's giving errors after upgrade to flow 0.61
<PROJECT_ROOT>/node_modules/react-native/Libraries/.*

[TrySound]

@rajat1saxena There's [untyped] section in config which ignores matched path and treats it as any.

[danielhusar]

I have same issue, newly created react native project throws this errors:

errors

❯ npm run flow                                                                                                                                      ✘

> [email protected] flow /Users/danielhusar/Dev/mobile/wallet
> flow

Launching Flow server for /Users/danielhusar/Dev/mobile/wallet
Spawned flow server (pid=99489)
Logs will go to /private/tmp/flow/zSUserszSdanielhusarzSDevzSmobilezSwallet.log
Monitor logs will go to /private/tmp/flow/zSUserszSdanielhusarzSDevzSmobilezSwallet.monitor_log
Error: node_modules/react-native/Libraries/Components/ScrollResponder.js:480
480:       var { animated, ...rect } = rect;
                           ^^^^^^^ rect. This type is incompatible with
472:     rect: { x: number, y: number, width: number, height: number, animated?: boolean },
               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ object type
  Property `animated` is incompatible:
    472:     rect: { x: number, y: number, width: number, height: number, animated?: boolean },
                   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ property `animated`. Property not found in
    480:       var { animated, ...rect } = rect;
                               ^^^^^^^ rect

Error: node_modules/react-native/Libraries/Inspector/Inspector.js:104
104:       clearTimeout(_hideWait);
                        ^^^^^^^^^ null. This type is incompatible with the expected param type of
733: declare function clearTimeout(timeoutId?: TimeoutID): void;
                                               ^^^^^^^^^ TimeoutID. See lib: /private/tmp/flow/flowlib_279909b3/core.js:733

Error: node_modules/react-native/Libraries/Interaction/InteractionManager.js:171
171:       _nextUpdateHandle = setTimeout(_processUpdate, 0 + DEBUG_DELAY);
                               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ TimeoutID. This type is incompatible with
182:   _nextUpdateHandle = 0;
                           ^ number

Error: node_modules/react-native/Libraries/Lists/FlatList.js:465
           v--------------------------------
465:       this._virtualizedListPairs.push({
466:         viewabilityConfig: this.props.viewabilityConfig,
467:         onViewableItemsChanged: this._createOnViewableItemsChanged(
...:
470:       });
           -^ rest parameter array of call of method `push`. Has some incompatible type argument with
249:     push(...items: Array<T>): number;
                        ^^^^^^^^ array type. See lib: /private/tmp/flow/flowlib_279909b3/core.js:249
  Type argument `T` is incompatible:
                                               v
    465:       this._virtualizedListPairs.push({
    466:         viewabilityConfig: this.props.viewabilityConfig,
    467:         onViewableItemsChanged: this._createOnViewableItemsChanged(
    ...:
    470:       });
               ^ object literal. This type is incompatible with
    476:   _virtualizedListPairs: Array<ViewabilityConfigCallbackPair> = [];
                                        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ViewabilityConfigCallbackPair
      Property `viewabilityConfig` is incompatible:
        466:         viewabilityConfig: this.props.viewabilityConfig,
                                        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ undefined. Inexact type is incompatible with exact type
         26:   viewabilityConfig: ViewabilityConfig,
                                  ^^^^^^^^^^^^^^^^^ ViewabilityConfig. See: node_modules/react-native/Libraries/Lists/ViewabilityHelper.js:26

Error: node_modules/react-native/Libraries/Lists/FlatList.js:558
558:       return keyExtractor(items, index);
                               ^^^^^ array type. This type is incompatible with the expected param type of
151:   keyExtractor: (item: ItemT, index: number) => string,
                            ^^^^^ ItemT

Error: node_modules/react-native/Libraries/Lists/ViewabilityHelper.js:91
 91:     this._timers.forEach(clearTimeout);
                              ^^^^^^^^^^^^ function type. This type is incompatible with the expected param type of
572:     forEach(callbackfn: (value: T, index: T, set: Set<T>) => mixed, thisArg?: any): void;
                             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ function type. See lib: /private/tmp/flow/flowlib_279909b3/core.js:572
  The first parameter is incompatible:
     77:   _timers: Set<number> = new Set();
                        ^^^^^^ number. This type is incompatible with
    733: declare function clearTimeout(timeoutId?: TimeoutID): void;
                                                   ^^^^^^^^^ TimeoutID. See lib: /private/tmp/flow/flowlib_279909b3/core.js:733

Error: node_modules/react-native/Libraries/Lists/ViewabilityHelper.js:200
200:         this._timers.delete(handle);
                                 ^^^^^^ TimeoutID. This type is incompatible with the expected param type of
 77:   _timers: Set<number> = new Set();
                    ^^^^^^ number

Error: node_modules/react-native/Libraries/Lists/ViewabilityHelper.js:207
207:       this._timers.add(handle);
                            ^^^^^^ TimeoutID. This type is incompatible with the expected param type of
 77:   _timers: Set<number> = new Set();
                    ^^^^^^ number

Error: node_modules/react-native/Libraries/Lists/VirtualizedList.js:484
                                  v
484:           this.scrollToIndex({
485:             animated: false,
486:             index: this.props.initialScrollIndex,
487:           }),
               ^ object literal. This type is incompatible with the expected param type of
                             v
266:   scrollToIndex(params: {
267:     animated?: ?boolean,
268:     index: number,
...:
271:   }) {
       ^ object type
  Property `index` is incompatible:
    486:             index: this.props.initialScrollIndex,
                            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ null or undefined. This type is incompatible with
    268:     index: number,
                    ^^^^^^ number

Error: node_modules/react-native/Libraries/Lists/VirtualizedList.js:484
                                  v
484:           this.scrollToIndex({
485:             animated: false,
486:             index: this.props.initialScrollIndex,
487:           }),
               ^ object literal. This type is incompatible with the expected param type of
                             v
266:   scrollToIndex(params: {
267:     animated?: ?boolean,
268:     index: number,
...:
271:   }) {
       ^ object type
  Property `index` is incompatible:
    486:             index: this.props.initialScrollIndex,
                            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ undefined. This type is incompatible with
    268:     index: number,
                    ^^^^^^ number

Error: node_modules/react-native/Libraries/Lists/VirtualizedList.js:500
500:     clearTimeout(this._initialScrollIndexTimeout);
                      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ number. This type is incompatible with the expected param type of
733: declare function clearTimeout(timeoutId?: TimeoutID): void;
                                               ^^^^^^^^^ TimeoutID. See lib: /private/tmp/flow/flowlib_279909b3/core.js:733

Error: node_modules/react-native/Libraries/Lists/VirtualizedList.js:1016
1016:       distanceFromEnd < onEndReachedThreshold * visibleLength &&
                              ^^^^^^^^^^^^^^^^^^^^^ null or undefined. The operand of an arithmetic operation must be a number.

Error: node_modules/react-native/Libraries/Lists/VirtualizedList.js:1016
1016:       distanceFromEnd < onEndReachedThreshold * visibleLength &&
                              ^^^^^^^^^^^^^^^^^^^^^ undefined. The operand of an arithmetic operation must be a number.

Error: node_modules/react-native/Libraries/Lists/VirtualizedList.js:1094
1094:         this.props.onEndReachedThreshold * visibleLength / 2;
              ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ null or undefined. The operand of an arithmetic operation must be a number.

Error: node_modules/react-native/Libraries/Lists/VirtualizedList.js:1094
1094:         this.props.onEndReachedThreshold * visibleLength / 2;
              ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ undefined. The operand of an arithmetic operation must be a number.

Error: node_modules/react-native/Libraries/Lists/VirtualizedList.js:1170
1170:           distanceFromEnd < onEndReachedThreshold * visibleLength
                                  ^^^^^^^^^^^^^^^^^^^^^ null or undefined. The operand of an arithmetic operation must be a number.

Error: node_modules/react-native/Libraries/Lists/VirtualizedList.js:1170
1170:           distanceFromEnd < onEndReachedThreshold * visibleLength
                                  ^^^^^^^^^^^^^^^^^^^^^ undefined. The operand of an arithmetic operation must be a number.

Error: node_modules/react-native/Libraries/Lists/VirtualizedList.js:1247
1247:     return frame;
                 ^^^^^ object type. This type is incompatible with the expected return type of
            v
1210:   ): ?{
1211:     length: number,
1212:     offset: number,
...:
1215:   } => {
        ^ object type
  Property `inLayout` is incompatible:
                v
    1210:   ): ?{
    1211:     length: number,
    1212:     offset: number,
    ...:
    1215:   } => {
            ^ property `inLayout`. Property not found in
    1247:     return frame;
                     ^^^^^ object type

Error: node_modules/react-native/Libraries/Lists/VirtualizedSectionList.js:236
236:       key: keyExtractor(viewable.item, info.index),
                                            ^^^^^^^^^^ null or undefined. This type is incompatible with the expected param type of
101:   keyExtractor: (item: Item, index: number) => string,
                                         ^^^^^^ number

Error: node_modules/react-native/Libraries/StyleSheet/flattenStyle.js:36
 36:     return getStyle(style);
                ^^^^^^^^^^^^^^^ number. This type is incompatible with the expected return type of
 29: function flattenStyle(style: ?StyleObj): ?Object {
                                               ^^^^^^ object type


Found 20 errors

flowconfig

[ignore]
; We fork some components by platform
.*/*[.]android.js

; Ignore "BUCK" generated dirs
<PROJECT_ROOT>/\.buckd/

; Ignore unexpected extra "@providesModule"
.*/node_modules/.*/node_modules/fbjs/.*

; Ignore duplicate module providers
; For RN Apps installed via npm, "Libraries" folder is inside
; "node_modules/react-native" but in the source repo it is in the root
.*/Libraries/react-native/React.js

; Ignore polyfills
.*/Libraries/polyfills/.*

[include]

[libs]
node_modules/react-native/Libraries/react-native/react-native-interface.js
node_modules/react-native/flow

[options]
emoji=true

module.system=haste

munge_underscores=true

module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'

suppress_type=$FlowIssue
suppress_type=$FlowFixMe
suppress_type=$FlowFixMeProps
suppress_type=$FlowFixMeState
suppress_type=$FixMe

suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(5[0-7]\\|[1-4][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(5[0-7]\\|[1-4][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError

[version]
^0.63.1

Any idea how to fix that? ()

"react-native": "^0.52.0"
"flow-bin": "^0.63.1"

[TrySound]

@danielhusar The problem is component folder which you don't ignore.

[danielhusar]

But how would I type check my components if I ignore them?

[TrySound]

@danielhusar It seems like those definitions are broken. I recommend to report this issue to react-native. Flow may only allow to ignore them (you may use [untyped] instead of [ignore]).

[danielhusar]

Thanks, sorted for now with:

[untyped]
.*/node_modules/react-native

[sergey-lapin]

You can do it even more specific than .*/node_modules/react-native, to keep most of the react-native typings

[untyped]
.*/node_modules/react-native/Libraries/Components/ScrollResponder

[vith]

It seems we need a way to silence errors that do not involve any of our files, rather than ways to not make use of a library's type annotations at all.

Most of those errors seem to indicate incompleteness. I just want to know if my code contradicts itself or the _existing_ type annotations of the APIs I call.

Would it be as simple as adding a new glob based .flowconfig section called [silence_internal_errors] or something, and requiring that for any error to be printed it must refer to at least one path not excluded by those globs?

[TrySound]

[untyped] solves the problem.

This probably can be closed.
/cc @vkurchatkin

[vith]

Relevant PR https://github.com/facebook/flow/pull/4916 for those who want to silence third party errors without discarding all type information in those files.

[jlaustill]

@TrySound untyped does NOT fix this, I've informed you of this multiple times.

[mattwills8]

I had a similar issue where I had about 30 flow errors all coming from the core react native library.

I went through all the files in react-native that flow was telling me had errors and untyped them. I ended up with this:

[untyped]
./node_modules/react-native-permissions/index.js
./node_modules/react-native/Libraries/ReactNative/renderApplication.js
./node_modules/react-native/Libraries/Animated/src/nodes/AnimatedInterpolation.js
./node_modules/react-native/Libraries/Animated/src/nodes/AnimatedValue.js
./node_modules/react-native/Libraries/Components/Switch/Switch
./node_modules/react-native/Libraries/ReactNative/YellowBox
./node_modules/react-native/Libraries/ReactNative/requireNativeComponent
./node_modules/react-native/Libraries/Lists/VirtualizedList
.*/node_modules/react-native/Libraries/Experimental/SwipeableRow/SwipeableListView

I guess i'll just remove them one by one each time there's a new release of flow or react native and see if the issues have been resolved

[evbo]

Please reopen this issue. The ability to disable all errors of a given type (optionally) is a great suggestion that would alleviate a ton of people's pain trying to manage .flowconfig ignore/untyped/declarations manually