[0.56.0-rc.2] Flow has lots of Cannot resolve module X

[sync]

Environment

React Native Environment Info:
    System:
      OS: macOS High Sierra 10.13.5
      CPU: x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
      Memory: 390.36 MB / 16.00 GB
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 8.11.2 - ~/.nvm/versions/node/v8.11.2/bin/node
      Yarn: 1.7.0 - ~/.nvm/versions/node/v8.11.2/bin/yarn
      npm: 6.1.0 - ~/.nvm/versions/node/v8.11.2/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
      Android SDK:
        Build Tools: 23.0.1, 25.0.2, 26.0.1, 27.0.3
        API Levels: 23, 25, 26, 27
    IDEs:
      Android Studio: 3.1 AI-173.4720617
      Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
    npmPackages:
      @storybook/react: ^3.4.6 => 3.4.7 
      @storybook/react-native: ^3.4.6 => 3.4.7 
      react: 16.3.2 => 16.3.2 
      react-native: 0.56.0-rc.2 => 0.56.0-rc.2 
    npmGlobalPackages:
      react-native-cli: 2.0.1
      react-native-git-upgrade: 0.2.7

Description

When generating a new app using react-native-init with latest 0.56.0-rc.2 selected, I am getting 97 flow errors. Same with 0.56.0-rc.1and 0.56.0-rc

For example:

Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ node_modules/react-native/Libraries/react-native/react-native-implementation.js:118:20

Cannot resolve module TabBarIOS.

     115│     return require('SwipeableListView');
     116│   },
     117│   get TabBarIOS() {
     118│     return require('TabBarIOS');
     119│   },
     120│   get Text() {
     121│     return require('Text');

Reproducible Demo

react-native init awesome --version="0.56.0-rc.2"
yarn add --dev flow-bin@0.74.0 
yarn flow

[elicwhite]

This repros for me and doesn't repro on the previous version.

It looks like this is because of the removal of @providesModule and the flow config not being updated to handle it. cc @rubennorte

[elicwhite]

I tried adding

module.system.haste.use_name_reducers=true
# get basename
module.system.haste.name_reducers='^.*/\([a-zA-Z0-9$_.-]+\.js\(\.flow\)?\)$' -> '\1'
# strip .js or .js.flow suffix
module.system.haste.name_reducers='^\(.*\)\.js\(\.flow\)?$' -> '\1'
# strip .ios suffix
module.system.haste.name_reducers='^\(.*\)\.ios$' -> '\1'
module.system.haste.name_reducers='^\(.*\)\.native$' -> '\1'
module.system.haste.paths.whitelist=<PROJECT_ROOT>/node_modules/react-native/Libraries/.*

to the .flowconfig based off of our internal config but Flow doesn't seem to pick it up. @rubennorte, do we need to do anything special to make this work?

[rubennorte]

You can use this configuration:

module.system=haste
module.system.haste.use_name_reducers=true
# keep the following in sync with server/haste/hasteImpl.js
# get basename
module.system.haste.name_reducers='^.*/\([a-zA-Z0-9$_.-]+\.js\(\.flow\)?\)$' -> '\1'
# strip .js or .js.flow suffix
module.system.haste.name_reducers='^\(.*\)\.js\(\.flow\)?$' -> '\1'
# strip .ios suffix
module.system.haste.name_reducers='^\(.*\)\.ios$' -> '\1'
module.system.haste.name_reducers='^\(.*\)\.android$' -> '\1'
module.system.haste.name_reducers='^\(.*\)\.native$' -> '\1'
module.system.haste.paths.blacklist=.*/__tests__/.*
module.system.haste.paths.blacklist=.*/__mocks__/.*
module.system.haste.paths.blacklist=<PROJECT_ROOT>/node_modules/react-native/Libraries/Animated/src/polyfills/.*
module.system.haste.paths.whitelist=<PROJECT_ROOT>/node_modules/react-native/Libraries/.*

[elicwhite]

Looks like that configuration fixes the problem. Lets get it added.

[hramos]

This is now in 0.56.0-rc.3.

[janhesters]

How do you add this fix?
If I put it under [options] in my .flowconfig it just causes more errors:

[ignore]

[include]

[libs]

[lints]

[options]
module.system=haste
module.system.haste.use_name_reducers=true
# keep the following in sync with server/haste/hasteImpl.js
# get basename
module.system.haste.name_reducers='^.*/\([a-zA-Z0-9$_.-]+\.js\(\.flow\)?\)$' -> '\1'
# strip .js or .js.flow suffix
module.system.haste.name_reducers='^\(.*\)\.js\(\.flow\)?$' -> '\1'
# strip .ios suffix
module.system.haste.name_reducers='^\(.*\)\.ios$' -> '\1'
module.system.haste.name_reducers='^\(.*\)\.android$' -> '\1'
module.system.haste.name_reducers='^\(.*\)\.native$' -> '\1'
module.system.haste.paths.blacklist=.*/__tests__/.*
module.system.haste.paths.blacklist=.*/__mocks__/.*
module.system.haste.paths.blacklist=<PROJECT_ROOT>/node_modules/react-native/Libraries/Animated/src/polyfills/.*
module.system.haste.paths.whitelist=<PROJECT_ROOT>/node_modules/react-native/Libraries/.*
[strict]

This is the error I get:

... 176 more errors (only 50 out of 226 errors displayed)
To see all errors, re-run Flow with --show-all-errors

Putting it under some of the other points causes the original errors of the question or something like this:

.flowconfig:11 Invalid strict mode lint "module.system=haste" encountered.

How do you fix this flow?

[carloscuesta]

With the fix applied at 843a433 I still see issues comming from node_modules/react-native/

Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ node_modules/react-native/Libraries/Animated/src/nodes/AnimatedInterpolation.js:353:12

Missing type annotation for U.

     350│   __transformDataType(range: Array<any>) {
     351│     // Change the string array type to number array
     352│     // So we can reuse the same logic in iOS and Android platform
     353│     return range.map(function(value) {
     354│       if (typeof value !== 'string') {
     355│         return value;
     356│       }
     357│       if (/deg$/.test(value)) {
     358│         const degrees = parseFloat(value) || 0;
     359│         const radians = degrees * Math.PI / 180.0;
     360│         return radians;
     361│       } else {
     362│         // Assume radians
     363│         return parseFloat(value) || 0;
     364│       }
     365│     });
     366│   }
     367│
     368│   __getNativeConfig(): any {


Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ node_modules/react-native/Libraries/Animated/src/nodes/AnimatedValue.js:54:16

Property update is missing in AnimatedNode [1].

     node_modules/react-native/Libraries/Animated/src/nodes/AnimatedValue.js
     51│ function _flush(rootNode: AnimatedValue): void {
     52│   const animatedStyles = new Set();
     53│   function findAnimatedStyles(node) {
     54│     if (typeof node.update === 'function') {
     55│       animatedStyles.add(node);
     56│     } else {
     57│       node.__getChildren().forEach(findAnimatedStyles);

     node_modules/react-native/Libraries/Animated/src/nodes/AnimatedWithChildren.js
 [1] 70│   __getChildren(): Array<AnimatedNode> {


Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ node_modules/react-native/Libraries/Components/Switch/Switch.js:105:13

Cannot assign !this.props.disabled to props.enabled because property enabled is missing in object literal [1].

 [1] 101│     const props = {...this.props};
     102│     props.onStartShouldSetResponder = () => true;
     103│     props.onResponderTerminationRequest = () => false;
     104│     if (Platform.OS === 'android') {
     105│       props.enabled = !this.props.disabled;
     106│       props.on = this.props.value;
     107│       props.style = this.props.style;
     108│       props.trackTintColor = this.props.value ? this.props.onTintColor : this.props.tintColor;


Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ node_modules/react-native/Libraries/Components/Switch/Switch.js:106:13

Cannot assign this.props.value to props.on because property on is missing in object literal [1].

 [1] 101│     const props = {...this.props};
     102│     props.onStartShouldSetResponder = () => true;
     103│     props.onResponderTerminationRequest = () => false;
     104│     if (Platform.OS === 'android') {
     105│       props.enabled = !this.props.disabled;
     106│       props.on = this.props.value;
     107│       props.style = this.props.style;
     108│       props.trackTintColor = this.props.value ? this.props.onTintColor : this.props.tintColor;
     109│     } else if (Platform.OS === 'ios') {


Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ node_modules/react-native/Libraries/Components/Switch/Switch.js:108:13

Cannot assign this.props.value ? this.props.onTintColor : this.props.tintColor to props.trackTintColor because property
trackTintColor is missing in object literal [1].

 [1] 101│     const props = {...this.props};
     102│     props.onStartShouldSetResponder = () => true;
     103│     props.onResponderTerminationRequest = () => false;
     104│     if (Platform.OS === 'android') {
     105│       props.enabled = !this.props.disabled;
     106│       props.on = this.props.value;
     107│       props.style = this.props.style;
     108│       props.trackTintColor = this.props.value ? this.props.onTintColor : this.props.tintColor;
     109│     } else if (Platform.OS === 'ios') {
     110│       props.style = [styles.rctSwitchIOS, this.props.style];
     111│     }


Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ node_modules/react-native/Libraries/Experimental/SwipeableRow/SwipeableListView.js:145:37

Property setNativeProps is missing in React.Element [1].

 [1]  58│   _listViewRef: ?React.Element<any> = null;
        :
     142│    * (from high 20s to almost consistently 60 fps)
     143│    */
     144│   _setListViewScrollable(value: boolean): void {
     145│     if (this._listViewRef && typeof this._listViewRef.setNativeProps === 'function') {
     146│       this._listViewRef.setNativeProps({
     147│         scrollEnabled: value,
     148│       });


Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ node_modules/react-native/Libraries/Experimental/SwipeableRow/SwipeableListView.js:154:37

Property getScrollResponder is missing in React.Element [1].

 [1]  58│   _listViewRef: ?React.Element<any> = null;
        :
     151│
     152│   // Passing through ListView's getScrollResponder() function
     153│   getScrollResponder(): ?Object {
     154│     if (this._listViewRef && typeof this._listViewRef.getScrollResponder === 'function') {
     155│       return this._listViewRef.getScrollResponder();
     156│     }
     157│   }


Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ node_modules/react-native/Libraries/Lists/VirtualizedList.js:908:19

Cannot assign array literal to scrollProps.style because property style is missing in object literal [1].

 [1] 893│     const scrollProps = {
     894│       ...this.props,
     895│       onContentSizeChange: this._onContentSizeChange,
     896│       onLayout: this._onLayout,
     897│       onScroll: this._onScroll,
     898│       onScrollBeginDrag: this._onScrollBeginDrag,
     899│       onScrollEndDrag: this._onScrollEndDrag,
     900│       onMomentumScrollEnd: this._onMomentumScrollEnd,
     901│       scrollEventThrottle: this.props.scrollEventThrottle, // TODO: Android support
     902│       invertStickyHeaders: this.props.invertStickyHeaders !== undefined
     903│         ? this.props.invertStickyHeaders
     904│         : this.props.inverted,
     905│       stickyHeaderIndices,
     906│     };
     907│     if (inversionStyle) {
     908│       scrollProps.style = [inversionStyle, this.props.style];
     909│     }
     910│
     911│     this._hasMore =


Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ node_modules/react-native/Libraries/Lists/VirtualizedList.js:1125:11

Property inLayout is missing in object type [1].

     1122│     const itemCount = this.props.getItemCount(this.props.data);
     1123│     for (let ii = 0; ii < itemCount; ii++) {
     1124│       const frame = this._getFrameMetricsApprox(ii);
     1125│       if (frame.inLayout) {
     1126│         framesInLayout.push(frame);
     1127│       }
     1128│     }
         :
 [1] 1474│   ): {length: number, offset: number} => {


Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ node_modules/react-native/Libraries/Lists/VirtualizedList.js:1649:25

Property debug is missing in object type [1].

 [1] 1567│     parentProps: {
     1568│       getItemLayout?: ?Function,
     1569│       renderItem: renderItemType,
     1570│     },
         :
     1646│       separators: this._separators,
     1647│     });
     1648│     const onLayout =
     1649│       getItemLayout && !parentProps.debug && !fillRateHelper.enabled()
     1650│         ? undefined
     1651│         : this.props.onLayout;
     1652│     // NOTE: that when this is a sticky header, `onLayout` will get automatically extracted and


Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ node_modules/react-native/Libraries/ReactNative/YellowBox.js:108:7

Property disableYellowBox is missing in object type [1].

     node_modules/react-native/Libraries/ReactNative/YellowBox.js
     105│ }
     106│
     107│ function updateWarningMap(...args): void {
     108│   if (console.disableYellowBox) {
     109│     return;
     110│   }
     111│

     /private/tmp/flow/flowlib_16d28148/core.js
 [1] 806│ declare var console: {
     807│   assert(condition: mixed, ...data: Array<any>): void;
     808│   clear(): void;
     809│   count(label: string): void;
     810│   debug(...data: Array<any>): void;
     811│   dir(...data: Array<any>): void;
     812│   dirxml(...data: Array<any>): void;
     813│   error(...data: Array<any>): void;
     814│   _exception(...data: Array<any>): void;
     815│   group(...data: Array<any>): void;
     816│   groupCollapsed(...data: Array<any>): void;
     817│   groupEnd(): void;
     818│   info(...data: Array<any>): void;
     819│   log(...data: Array<any>): void;
     820│   profile(name?: string): void;
     821│   profileEnd(name?: string): void;
     822│   table(tabularData: { [key: string]: any } | Array<{ [key: string]: any }> | Array<Array<any>>): void;
     823│   time(label: string): void;
     824│   timeEnd(label: string): void;
     825│   timeStamp(label?: string): void;
     826│   trace(...data: Array<any>): void;
     827│   warn(...data: Array<any>): void;
     828│ };


Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ node_modules/react-native/Libraries/ReactNative/YellowBox.js:181:19

Property ignoredYellowBox is missing in object type [1].

     node_modules/react-native/Libraries/ReactNative/YellowBox.js
     178│
     179│   // DEPRECATED
     180│   return (
     181│     Array.isArray(console.ignoredYellowBox) &&
     182│     console.ignoredYellowBox.some(ignorePrefix =>
     183│       warning.startsWith(String(ignorePrefix)),
     184│     )

     /private/tmp/flow/flowlib_16d28148/core.js
 [1] 806│ declare var console: {
     807│   assert(condition: mixed, ...data: Array<any>): void;
     808│   clear(): void;
     809│   count(label: string): void;
     810│   debug(...data: Array<any>): void;
     811│   dir(...data: Array<any>): void;
     812│   dirxml(...data: Array<any>): void;
     813│   error(...data: Array<any>): void;
     814│   _exception(...data: Array<any>): void;
     815│   group(...data: Array<any>): void;
     816│   groupCollapsed(...data: Array<any>): void;
     817│   groupEnd(): void;
     818│   info(...data: Array<any>): void;
     819│   log(...data: Array<any>): void;
     820│   profile(name?: string): void;
     821│   profileEnd(name?: string): void;
     822│   table(tabularData: { [key: string]: any } | Array<{ [key: string]: any }> | Array<Array<any>>): void;
     823│   time(label: string): void;
     824│   timeEnd(label: string): void;
     825│   timeStamp(label?: string): void;
     826│   trace(...data: Array<any>): void;
     827│   warn(...data: Array<any>): void;
     828│ };


Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ node_modules/react-native/Libraries/ReactNative/YellowBox.js:382:9

Property disableYellowBox is missing in object type [1].

     node_modules/react-native/Libraries/ReactNative/YellowBox.js
     379│   }
     380│
     381│   render() {
     382│     if (console.disableYellowBox || this.state.warningMap.size === 0) {
     383│       return null;
     384│     }
     385│     const ScrollView = require('ScrollView');

     /private/tmp/flow/flowlib_16d28148/core.js
 [1] 806│ declare var console: {
     807│   assert(condition: mixed, ...data: Array<any>): void;
     808│   clear(): void;
     809│   count(label: string): void;
     810│   debug(...data: Array<any>): void;
     811│   dir(...data: Array<any>): void;
     812│   dirxml(...data: Array<any>): void;
     813│   error(...data: Array<any>): void;
     814│   _exception(...data: Array<any>): void;
     815│   group(...data: Array<any>): void;
     816│   groupCollapsed(...data: Array<any>): void;
     817│   groupEnd(): void;
     818│   info(...data: Array<any>): void;
     819│   log(...data: Array<any>): void;
     820│   profile(name?: string): void;
     821│   profileEnd(name?: string): void;
     822│   table(tabularData: { [key: string]: any } | Array<{ [key: string]: any }> | Array<Array<any>>): void;
     823│   time(label: string): void;
     824│   timeEnd(label: string): void;
     825│   timeStamp(label?: string): void;
     826│   trace(...data: Array<any>): void;
     827│   warn(...data: Array<any>): void;
     828│ };


Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ node_modules/react-native/Libraries/ReactNative/renderApplication.js:41:5

Property prototype is missing in React.StatelessFunctionalComponent [1].

 [1] 24│   RootComponent: React.ComponentType<Props>,
       :
     38│   // to be async also. To do this, wrap AppContainer with an async marker.
     39│   // For more info see https://fb.me/is-component-async
     40│   if (
     41│     RootComponent.prototype != null &&
     42│     RootComponent.prototype.unstable_isAsyncReactComponent === true
     43│   ) {
     44│     // $FlowFixMe This is not yet part of the official public API


Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ node_modules/react-native/Libraries/ReactNative/requireNativeComponent.js:122:16

Property __propTypesSecretDontUseThesePlease is missing in React.StatelessFunctionalComponent [1].

 [1]  50│   componentInterface?: ?ComponentInterface,
        :
     119│     // TODO (bvaughn) Revert this particular change any time after April 1
     120│     if (componentInterface) {
     121│       viewConfig.propTypes =
     122│         typeof componentInterface.__propTypesSecretDontUseThesePlease ===
     123│         'object'
     124│           ? componentInterface.__propTypesSecretDontUseThesePlease
     125│           : componentInterface.propTypes;

Found 15 errors

[elicwhite]

Can you create a new issue? Those errors are unrelated to the original issue (but should still get fixed)