Flow: Issue with React Native project

[bolismauro]

Hello everyone. I'm working on a React Native project and I receive this error every time I (or someone else, like a package in node_modules) import react.

This modules resolves to "<<PROJECT_ROOT>>/../../../node_modules/react/package.json", 
which is outside both your root directory and all of the entries in
the [include] section of your .flowconfig.
You should either add this directory to the [include] section of your .flowconfig,
move your .flowconfig file higher in the project directory tree, or move this package
under  your Flow root directory.: /path/to/react/node_modules/react-native/Libraries/ReactIOS/YellowBox.js:263

I honestly don't understand what's going on. Has anyone else this problem?
I searched in the past issues and I only find something related to third party libraries, but never to react itself

[Benjamin-Dobell]

@bolismauro I just ran into this myself.

Removing:

# Flow has a built-in definition for the 'react' module which we prefer to use
# over the currently-untyped source
.*/node_modules/react/react.js
.*/node_modules/react/lib/React.js
.*/node_modules/react/lib/ReactDOM.js

from .flowconfig seems to resolve the issue. I'm new to React, React Native, Flow and even Node. So I don't pretend to understand exactly what is going on here 😉

[bolismauro]

It seems that now those errors are gone. I receive a massive amount of errors from react-native files though.
It is just me?

[Benjamin-Dobell]

Hmm, I don't get those. We may be on different versions of something:

$ flow version
Flow, a static type checker for JavaScript, version 0.25.0

There's actually a 0.26.0 out, needs to be pushed to Homebrew. I'll submit a formula pull request shortly. EDIT: Hmm, looks like the formula is up to date. I just must have forgot to upgrade.

Then my packages.json has:

  "dependencies": {
    "react": "^15.0.2",
    "react-native": "^0.26.3",
    "react-redux": "^4.4.5",
    "redux": "^3.5.2"
  },
  "devDependencies": {
    "flow": "^0.2.3",
    "flow-bin": "^0.26.0"
  }

[Benjamin-Dobell]

I just upgraded to the latest flow, 0.26.0. No, I'm still not seeing react-native errors.

[bolismauro]

I'm using RN 0.25.1 since I can't update it to the 0.26 because of a bug.
It may be that..
I'll wait for RN 0.27

[ryyppy]

Hey!
Can you please provide your .flowconfig ?
React-Native needs quite some configuration to make flow work properly ;-)

[bolismauro]

Sure,

[ignore]

# We fork some components by platform.
.*/*.web.js
.*/*.android.js

# Some modules have their own node_modules with overlap
.*/node_modules/node-haste/.*

# Ugh
.*/node_modules/babel.*
.*/node_modules/babylon.*
.*/node_modules/invariant.*

# Ignore react and fbjs where there are overlaps, but don't ignore
# anything that react-native relies on
.*/node_modules/fbjs/lib/Map.js
.*/node_modules/fbjs/lib/ErrorUtils.js

# Flow has a built-in definition for the 'react' module which we prefer to use
# over the currently-untyped source
#.*/node_modules/react/react.js
#.*/node_modules/react/lib/React.js
#.*/node_modules/react/lib/ReactDOM.js

.*/__mocks__/.*
.*/__tests__/.*

.*/commoner/test/source/widget/share.js

# Ignore commoner tests
.*/node_modules/commoner/test/.*

# See https://github.com/facebook/flow/issues/442
.*/react-tools/node_modules/commoner/lib/reader.js

# Ignore jest
.*/node_modules/jest-cli/.*

# Ignore Website
.*/website/.*

# Ignore generators
.*/local-cli/generator.*

# Ignore BUCK generated folders
.*\.buckd/

.*/node_modules/is-my-json-valid/test/.*\.json
.*/node_modules/iconv-lite/encodings/tables/.*\.json
.*/node_modules/y18n/test/.*\.json
.*/node_modules/spdx-license-ids/spdx-license-ids.json
.*/node_modules/spdx-exceptions/index.json
.*/node_modules/resolve/test/subdirs/node_modules/a/b/c/x.json
.*/node_modules/resolve/lib/core.json
.*/node_modules/jsonparse/samplejson/.*\.json
.*/node_modules/json5/test/.*\.json
.*/node_modules/ua-parser-js/test/.*\.json
.*/node_modules/builtin-modules/builtin-modules.json
.*/node_modules/binary-extensions/binary-extensions.json
.*/node_modules/url-regex/tlds.json
.*/node_modules/joi/.*\.json
.*/node_modules/isemail/.*\.json
.*/node_modules/tr46/.*\.json


[include]

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

[options]
module.system=haste

esproposal.class_static_fields=enable
esproposal.class_instance_fields=enable
unsafe.enable_getters_and_setters=true

munge_underscores=true

module.name_mapper='^image![a-zA-Z0-9$_-]+$' -> 'GlobalImageStub'
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=$FixMe

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

[version]
>=0.24.2

I changed these

# Flow has a built-in definition for the 'react' module which we prefer to use
# over the currently-untyped source
#.*/node_modules/react/react.js
#.*/node_modules/react/lib/React.js
#.*/node_modules/react/lib/ReactDOM.js

based on @Benjamin-Dobell comment

[rajapanidepu]

I am facing the same issue.

[chetstone]

Make sure you're using a .flowconfig from the version of react-native you're using and install the same version of flow that's mentioned in the [version] section of that .flowconfig

[bolismauro]

So this is the structure

/
 /react
   - .flowconfig
   /node_modules
 /other stuff

I moved flowconfig file in the root folder but nothing has changed. I still have a lot (> 72) errors on react native. I've also tried to change the paths on flowconfig to take into account the react folder but nothing has changed

Here is a screen of the nuclide errors

[deeptiagrawa]

I am getting these errors as well.

node_modules/react-native/Libraries/CustomComponents/NavigationExperimental/NavigationLegacyNavigator.js:48
 48: const React = require('React');
                   ^^^^^^^^^^^^^^^^ This modules resolves to "<<PROJECT_ROOT>>/../../../node_modules/react/package.json",
 which is outside both your root directory and all of the entries in the [include] section of your 
.flowconfig. You should either add this directory to the [include] section of your .flowconfig, 
move your .flowconfig file higher in the project directory tree, or move this package under
your Flow root directory.

Below are my versions for various modules:

react-native --> 0.25.1 
flow version is --> 0.24.2
npm --> 3.8.3
node --> 5.8.0

I tried all the suggestions provided in this issue. Also it's creating problem only in my machine and working fine in others. I assume there is no problem with .flowconfig file and some configuration issue on my machine.

[Benjamin-Dobell]

@deeptiagrawa You're definitely not the only one getting this. You are running some out-dated software, but I'm still receiving these same errors every update. I still have to comment out:

# Flow has a built-in definition for the 'react' module which we prefer to use
# over the currently-untyped source
#.*/node_modules/react/react.js
#.*/node_modules/react/lib/React.js
#.*/node_modules/react/lib/ReactDOM.js

in .flowconfig.

$ react-native --version
react-native-cli: 1.0.0
react-native: 0.28.0
$ flow version
Flow, a static type checker for JavaScript, version 0.26.0

[simonsmith]

Is anyone else still experiencing these errors? I just upgraded to 0.33 and have many of them:

node_modules/react-native/Libraries/Components/Touchable/TouchableBounce.js:14
 14: var Animated = require('Animated');
                    ^^^^^^^^^^^^^^^^^^^ This modules resolves to "<<PROJECT_ROOT>>/../../../node_modules/animated/package.json", which is outside both your root directory and all of the entries in the [include] section of your .flowconfig. You should either add this directory to the [include] section of your .flowconfig, move your .flowconfig file higher in the project directory tree, or move this package under your Flow root directory.

node_modules/react-native/Libraries/CustomComponents/NavigationExperimental/NavigationCard.js:35
 35: const Animated = require('Animated');
                      ^^^^^^^^^^^^^^^^^^^ This modules resolves to "<<PROJECT_ROOT>>/../../../node_modules/animated/package.json", which is outside both your root directory and all of the entries in the [include] section of your .flowconfig. You should either add this directory to the [include] section of your .flowconfig, move your .flowconfig file higher in the project directory tree, or move this package under your Flow root directory.

node_modules/react-native/Libraries/CustomComponents/NavigationExperimental/NavigationCardStackPanResponder.js:15
 15: const Animated = require('Animated');
                      ^^^^^^^^^^^^^^^^^^^ This modules resolves to "<<PROJECT_ROOT>>/../../../node_modules/animated/package.json", which is outside both your root directory and all of the entries in the [include] section of your .flowconfig. You should either add this directory to the [include] section of your .flowconfig, move your .flowconfig file higher in the project directory tree, or move this package under your Flow root directory.

[Mlobaievskyi]

I had the same errors. I changed [libs] pathes to react-native modules and now everything is ok.
Here is my .flowconfig file

[ignore]

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

# Ignore templates with `@flow` in header
.*/local-cli/generator.*

# Ignore malformed json
.*/node_modules/y18n/test/.*\.json

# Ignore the website subdir
<PROJECT_ROOT>/website/.*

# Ignore BUCK generated dirs
<PROJECT_ROOT>/\.buckd/

# Ignore unexpected extra @providesModule
.*/node_modules/commoner/test/source/widget/share.js

# 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
.*/Libraries/react-native/ReactNative.js
.*/node_modules/jest-runtime/build/__tests__/.*

# Ignore node_modules
.*/node_modules/react/node_modules/fbjs/.*

[include]

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


[options]
module.system=haste

esproposal.class_static_fields=enable
esproposal.class_instance_fields=enable
esproposal.decorators=ignore

experimental.strict_type_args=true

munge_underscores=true

module.name_mapper='^image![a-zA-Z0-9$_-]+$' -> 'GlobalImageStub'
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=$FixMe

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

unsafe.enable_getters_and_setters=true

[version]
^0.32.0

[simonsmith]

I'm using a default installation of react-native 0.34.0 and I still see this error. Starting to wonder if it's tied to my machine somehow

[matthamil]

Using react-native v0.41 and Flow v0.37.0 I get the same "require" bugs as mentioned above:

[kiddo13]

Bump into this error with react-native: "0.42.0" and flow-bin: "0.38.0"

Ignore these files inside .flowconfig

[ignore]
/* ... */

.*/node_modules/react-native-experimental-navigation/.*
.*/Libraries/Components/StaticContainer.js

/* ... */

[version]
0.38.0

[alpcanaydin]

I get the same problem with react-native 0.42.0 and flow-bin 0.38.0. Is there any solution for this?

[rebelliard]

Ran into this with react-native: 0.43.1 and flow-bin:0.43.1:

You can see the generated .flowconfig here.

[matthamil]

For anyone who still needs help with this, I have fixed the issue on my machine:

Instead of running flow with flow; test $? -eq 1 -o $? -eq 2 like the getting started docs say, use:

./node_modules/.bin/flow app; test $? -eq 1 -o $? -eq 2 where app is the main directory for your app code.

I'm also running RN 0.44.0 and flow-bin 0.42.0

[asolove]

Looks like there is a known way to do this now, so I'm going to close the issue. Feel free to object if there's something else here that should be fixed in the flow codebase and I can reopen.

[baldursson]

@asolove What is the known way? I didn't find a solution in this thread. I still get about 50 errors from React Native libraries, like:

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

[strizzwald]

Also got some errors today with react-native: 0.50.3 and flow-bin: 0.63.1. Doing yarn run flow throws
__.flowconfig:72 Unsupported option specified!__ error.

[baldursson]

I realized the importance of keeping the Flow version in sync with React Native. Check the .flowconfig file of the React Native version you are using, e.g https://github.com/facebook/react-native/blob/v0.51.0/.flowconfig. Then make sure it matches your version of flow-bin. By downgrading flow-bin to 0.57.3 I got rid of 100+ errors.