Adding Flow Broken

Description

I created a new project using create-react-native-app myproject and attempted to add flow using the instructions at Adding Flow

Expected Behavior

These are the following steps I took. create-react-native-app myproject yarn add --dev flow-bin@0.56.0 Added “flow: flow” to package.json. npm run flow I expected the output to show no flow type errors.

Observed Behavior

Instead, there were 21 errors. All of them came from node_module folders.

Here are the error messages:

Error: node_modules/metro/src/Bundler/util.js.flow:47
 47: ): Ast {
        ^^^ identifier `Ast`. Could not resolve name

Error: node_modules/metro/src/ModuleGraph/worker/collectDependencies.js.flow:46
 46:   ast: Ast,
            ^^^ identifier `Ast`. Could not resolve name

Error: node_modules/metro/src/ModuleGraph/worker/optimizeDependencies.js.flow:28
 28:   ast: Ast,
            ^^^ identifier `Ast`. Could not resolve name

Error: node_modules/metro/src/Resolver/index.js.flow:20
 20:   compactMapping,
       ^^^^^^^^^^^^^^ property `compactMapping`. Property not found in
 23: } = require('metro-source-map');
         ^^^^^^^^^^^^^^^^^^^^^^^^^^^ object literal

Error: node_modules/metro/src/Resolver/index.js.flow:22
 22:   toRawMappings,
       ^^^^^^^^^^^^^ property `toRawMappings`. Property not found in
 23: } = require('metro-source-map');
         ^^^^^^^^^^^^^^^^^^^^^^^^^^^ object literal

Error: node_modules/metro/src/Resolver/index.js.flow:78
                                                     v
 78:     const depGraph = await DependencyGraph.load({
 79:       assetDependencies: [opts.assetRegistryPath],
 80:       assetExts: opts.assetExts,
...:
 99:     });
         ^ object literal. This type is incompatible with the expected param type of
131:     opts: Options,
               ^^^^^^^ object type. See: node_modules/metro/src/node-haste/DependencyGraph.js.flow:131
  Property `assetRegistryPath` is incompatible:
    131:     opts: Options,
                   ^^^^^^^ property `assetRegistryPath`. Property not found in. See: node_modules/metro/src/node-haste/DependencyGraph.js.flow:131
                                                         v
     78:     const depGraph = await DependencyGraph.load({
     79:       assetDependencies: [opts.assetRegistryPath],
     80:       assetExts: opts.assetExts,
    ...:
     99:     });
             ^ object literal

Error: node_modules/metro/src/Resolver/index.js.flow:78
                                                     v
 78:     const depGraph = await DependencyGraph.load({
 79:       assetDependencies: [opts.assetRegistryPath],
 80:       assetExts: opts.assetExts,
...:
 99:     });
         ^ object literal. This type is incompatible with the expected param type of
131:     opts: Options,
               ^^^^^^^ object type. See: node_modules/metro/src/node-haste/DependencyGraph.js.flow:131
  Property `getPolyfills` is incompatible:
    131:     opts: Options,
                   ^^^^^^^ property `getPolyfills`. Property not found in. See: node_modules/metro/src/node-haste/DependencyGraph.js.flow:131
                                                         v
     78:     const depGraph = await DependencyGraph.load({
     79:       assetDependencies: [opts.assetRegistryPath],
     80:       assetExts: opts.assetExts,
    ...:
     99:     });
             ^ object literal

Error: node_modules/metro/src/Resolver/index.js.flow:78
                                                     v
 78:     const depGraph = await DependencyGraph.load({
 79:       assetDependencies: [opts.assetRegistryPath],
 80:       assetExts: opts.assetExts,
...:
 99:     });
         ^ object literal. This type is incompatible with the expected param type of
131:     opts: Options,
               ^^^^^^^ object type. See: node_modules/metro/src/node-haste/DependencyGraph.js.flow:131
  Property `projectRoots` is incompatible:
    131:     opts: Options,
                   ^^^^^^^ property `projectRoots`. Property not found in. See: node_modules/metro/src/node-haste/DependencyGraph.js.flow:131
                                                         v
     78:     const depGraph = await DependencyGraph.load({
     79:       assetDependencies: [opts.assetRegistryPath],
     80:       assetExts: opts.assetExts,
    ...:
     99:     });
             ^ object literal

Error: node_modules/metro/src/Resolver/index.js.flow:78
                                                     v
 78:     const depGraph = await DependencyGraph.load({
 79:       assetDependencies: [opts.assetRegistryPath],
 80:       assetExts: opts.assetExts,
...:
 99:     });
         ^ property `assetDependencies`. Property not found in
131:     opts: Options,
               ^^^^^^^ object type. See: node_modules/metro/src/node-haste/DependencyGraph.js.flow:131

Error: node_modules/metro/src/Resolver/index.js.flow:78
                                                     v
 78:     const depGraph = await DependencyGraph.load({
 79:       assetDependencies: [opts.assetRegistryPath],
 80:       assetExts: opts.assetExts,
...:
 99:     });
         ^ property `forceNodeFilesystemAPI`. Property not found in
131:     opts: Options,
               ^^^^^^^ object type. See: node_modules/metro/src/node-haste/DependencyGraph.js.flow:131

Error: node_modules/metro/src/Resolver/index.js.flow:78
                                                     v
 78:     const depGraph = await DependencyGraph.load({
 79:       assetDependencies: [opts.assetRegistryPath],
 80:       assetExts: opts.assetExts,
...:
 99:     });
         ^ property `ignorePattern`. Property not found in
131:     opts: Options,
               ^^^^^^^ object type. See: node_modules/metro/src/node-haste/DependencyGraph.js.flow:131

Error: node_modules/metro/src/Resolver/index.js.flow:78
                                                     v
 78:     const depGraph = await DependencyGraph.load({
 79:       assetDependencies: [opts.assetRegistryPath],
 80:       assetExts: opts.assetExts,
...:
 99:     });
         ^ property `preferNativePlatform`. Property not found in
131:     opts: Options,
               ^^^^^^^ object type. See: node_modules/metro/src/node-haste/DependencyGraph.js.flow:131

Error: node_modules/metro/src/Resolver/index.js.flow:78
                                                     v
 78:     const depGraph = await DependencyGraph.load({
 79:       assetDependencies: [opts.assetRegistryPath],
 80:       assetExts: opts.assetExts,
...:
 99:     });
         ^ property `roots`. Property not found in
131:     opts: Options,
               ^^^^^^^ object type. See: node_modules/metro/src/node-haste/DependencyGraph.js.flow:131

Error: node_modules/metro/src/Resolver/index.js.flow:78
                                                     v
 78:     const depGraph = await DependencyGraph.load({
 79:       assetDependencies: [opts.assetRegistryPath],
 80:       assetExts: opts.assetExts,
...:
 99:     });
         ^ property `useWatchman`. Property not found in
131:     opts: Options,
               ^^^^^^^ object type. See: node_modules/metro/src/node-haste/DependencyGraph.js.flow:131

Error: node_modules/metro/src/index.js.flow:238
       v--------------------------------------------
238:   httpServer.listen(port, options.host, () => {
239:     options.onReady && options.onReady(httpServer);
240:   });
       -^ call of method `listen`. Function cannot be called on any member of intersection type
238:   httpServer.listen(port, options.host, () => {
       ^^^^^^^^^^^^^^^^^ intersection
  Member 1:
  1094:     listen(port: number, hostname?: string, backlog?: number, callback?: Function): Server;
            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ function type. See lib: /tmp/flow/flowlib_183d7a81/node.js:1094
  Error:
                                               v------
  238:   httpServer.listen(port, options.host, () => {
  239:     options.onReady && options.onReady(httpServer);
  240:   });
         ^ function. This type is incompatible with the expected param type of
  1094:     listen(port: number, hostname?: string, backlog?: number, callback?: Function): Server;
                                                              ^^^^^^ number. See lib: /tmp/flow/flowlib_183d7a81/node.js:1094
  Member 2:
  1095:     listen(path: string, callback?: Function): Server;
            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ function type. See lib: /tmp/flow/flowlib_183d7a81/node.js:1095
  Error:
  238:   httpServer.listen(port, options.host, () => {
                           ^^^^ number. This type is incompatible with the expected param type of
  1095:     listen(path: string, callback?: Function): Server;
                         ^^^^^^ string. See lib: /tmp/flow/flowlib_183d7a81/node.js:1095
  Member 3:
  1096:     listen(handle: Object, callback?: Function): Server;
            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ function type. See lib: /tmp/flow/flowlib_183d7a81/node.js:1096
  Error:
  238:   httpServer.listen(port, options.host, () => {
                           ^^^^ number. This type is incompatible with the expected param type of
  1096:     listen(handle: Object, callback?: Function): Server;
                           ^^^^^^ object type. See lib: /tmp/flow/flowlib_183d7a81/node.js:1096

Error: node_modules/metro/src/index.js.flow:238
       v--------------------------------------------
238:   httpServer.listen(port, options.host, () => {
239:     options.onReady && options.onReady(httpServer);
240:   });
       -^ call of method `listen`. Function cannot be called on any member of intersection type
238:   httpServer.listen(port, options.host, () => {
       ^^^^^^^^^^^^^^^^^ intersection
  Member 1:
  1128:     listen(port: number, hostname?: string, backlog?: number, callback?: Function): Server;
            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ function type. See lib: /tmp/flow/flowlib_183d7a81/node.js:1128
  Error:
                                               v------
  238:   httpServer.listen(port, options.host, () => {
  239:     options.onReady && options.onReady(httpServer);
  240:   });
         ^ function. This type is incompatible with the expected param type of
  1128:     listen(port: number, hostname?: string, backlog?: number, callback?: Function): Server;
                                                              ^^^^^^ number. See lib: /tmp/flow/flowlib_183d7a81/node.js:1128
  Member 2:
  1129:     listen(path: string, callback?: Function): Server;
            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ function type. See lib: /tmp/flow/flowlib_183d7a81/node.js:1129
  Error:
  238:   httpServer.listen(port, options.host, () => {
                           ^^^^ number. This type is incompatible with the expected param type of
  1129:     listen(path: string, callback?: Function): Server;
                         ^^^^^^ string. See lib: /tmp/flow/flowlib_183d7a81/node.js:1129
  Member 3:
  1130:     listen(handle: Object, callback?: Function): Server;
            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ function type. See lib: /tmp/flow/flowlib_183d7a81/node.js:1130
  Error:
  238:   httpServer.listen(port, options.host, () => {
                           ^^^^ number. This type is incompatible with the expected param type of
  1130:     listen(handle: Object, callback?: Function): Server;
                           ^^^^^^ object type. See lib: /tmp/flow/flowlib_183d7a81/node.js:1130

Error: node_modules/react-native/Libraries/Components/StatusBar/StatusBar.js:350
350:         StatusBar._propsStack,
             ^^^^^^^^^^^^^^^^^^^^^ empty array literal. This type is incompatible with the expected param type of
 67:   propsStack: Array<Object>,
                   ^^^^^^^^^^^^^ array type
  Type argument `T` is incompatible:
    327:     const index = StatusBar._propsStack.indexOf(this._stackEntry);
                                                         ^^^^^^^^^^^^^^^^ null. This type is incompatible with
     67:   propsStack: Array<Object>,
                             ^^^^^^ object type

Error: node_modules/react-native/Libraries/Components/StatusBar/StatusBar.js:350
350:         StatusBar._propsStack,
             ^^^^^^^^^^^^^^^^^^^^^ empty array literal. This type is incompatible with the expected param type of
 67:   propsStack: Array<Object>,
                   ^^^^^^^^^^^^^ array type
  Type argument `T` is incompatible:
    334:     const index = StatusBar._propsStack.indexOf(this._stackEntry);
                                                         ^^^^^^^^^^^^^^^^ null. This type is incompatible with
     67:   propsStack: Array<Object>,
                             ^^^^^^ object type

Error: node_modules/react-native/local-cli/bundle/buildBundle.js:123
123:     packagerInstance = new Server(options);
                                       ^^^^^^^ object literal. This type is incompatible with the expected param type of
112:   constructor(options: Options) {
                            ^^^^^^^ object type. See: node_modules/metro/src/Server/index.js.flow:112
  Property `dynamicDepsInPackages` is incompatible:
    112:   constructor(options: Options) {
                                ^^^^^^^ property `dynamicDepsInPackages`. Property not found in. See: node_modules/metro/src/Server/index.js.flow:112
    123:     packagerInstance = new Server(options);
                                           ^^^^^^^ object literal

Error: node_modules/react-native/local-cli/server/runServer.js:133
133:       websocketServer: new HmrServer(packagerServer, reporter),
                                                          ^^^^^^^^ unused function argument
         v--------------------------------------------
   47:   constructor(packagerServer: PackagerServer) {
   48:     this._packagerServer = packagerServer;
   49:     this._reporter = packagerServer.getReporter();
   50:   }
         ^ function expects no more than 1 argument. See: node_modules/metro/src/HmrServer/index.js.flow:47

Error: node_modules/react-native/local-cli/server/runServer.js:174
                                 v
174:   return Metro.createServer({
175:     assetExts: defaultAssetExts.concat(args.assetExts),
176:     assetRegistryPath: ASSET_REGISTRY_PATH,
...:
202:   });
       ^ object literal. This type is incompatible with the expected param type of
146: function createServer(options: Options): Server {
                                    ^^^^^^^ object type. See: node_modules/metro/src/legacy.js.flow:146
  Property `dynamicDepsInPackages` is incompatible:
    146: function createServer(options: Options): Server {
                                        ^^^^^^^ property `dynamicDepsInPackages`. Property not found in. See: node_modules/metro/src/legacy.js.flow:146
                                     v
    174:   return Metro.createServer({
    175:     assetExts: defaultAssetExts.concat(args.assetExts),
    176:     assetRegistryPath: ASSET_REGISTRY_PATH,
    ...:
    202:   });
           ^ object literal


Found 21 errors
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! cpreview@0.1.0 flow: `flow`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the cpreview@0.1.0 flow script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

Environment

Please run these commands in the project folder and fill in their results:

• npm ls react-native-scripts: react-native-scripts@1.11.1
• npm ls react-native: react-native@0.52.0
• npm ls expo: expo@25.0.0
• node -v: v9.5.0
• npm -v: 4.6.1
• yarn --version: 1.3.2
• watchman version: 4.9.0

Also specify:

1. Operating system: Linux (Arch)
2. Phone/emulator/simulator & version: Android phone (Samsung Galaxy S7 physical device)

Reproducible Demo

create-react-native-app myapp cd myapp && yarn add --dev flow-bin@0.56.0 (The version listed in .flowconfig was 0.56.0) Add “flow”: “flow” to package.json scripts. npm run flow

I understand that the errors are coming from files outside this repo, but the instructions suggest that adding flow works when it doesn’t. In my opinion, either the instructions should be updated or the problem should be fixed.

I tried some hacks such as adding node_modules to the [ignore] section of .flowconfig, but then I don’t get the benefits of having a typechecker (or autocomplete) for the react native components. This doesn’t seem like the ideal solution.

[christophehurpeau]

Another solution:

In .flowconfig:

1. Update to latest flow: ^0.68.0 under [version], also in package.json and run yarn install. Remove unsafe.enable_getters_and_setters=true.
2. Add <PROJECT_ROOT>/node_modules/react-native/Libraries/.* under a new section [untyped]
3. Add <PROJECT_ROOT>/node_modules/metro/.* under [ignore]
4. Add <PROJECT_ROOT>/node_modules/@expo/.* under [ignore] with SDK 26 (edit)

[ghost]

@PiTiLeZarD I got flow to work using the following steps:

1. Create a libdefs.js file in the root folder.
2. Add declare module 'react-native' { declare var exports: any; } to libdefs.js
3. Add any offending modules (in my case metro and react-native) to .flowconfig under [ignore] section <PROJECT_ROOT>/node_modules/metro/.* <PROJECT_ROOT>/node_modules/react-native/.*
4. Add ./libdefs.js under [libs] section in .flowconfig.

The result is that you don’t get flow type checking on react native components (bummer), but at least you get to use flow type checking in YOUR code.