Flow-for-vscode: Cannot resolve module `react-native`

[AirshipAlex]

I'm using this plugin with a fresh install of React Native 0.54.0 and for some reason I'm seeing Cannot resolve module "react-native" whenever I import from the library.

Here's my version info:
React Native: 0.54.0
flow-bin: 0.66.0

.flowconfig (by default from RN)

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

; Ignore metro
.*/node_modules/metro/.*

.*/node_modules/.*

<PROJECT_ROOT>/theme/.*

[include]

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

[options]
all=true
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'

module.file_ext=.js
module.file_ext=.jsx
module.file_ext=.json
module.file_ext=.native.js

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

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

[version]
^0.66.0

[jamestowers]

Make sure you have the same version of flow-bin installed as the one at the bottom of the .flowconfig file. If you already have flow-bin installed locally, don't change the .flowconfig version to match that, change the version of flow-bin instead

[arielalvarez88]

+1

[diegoprates]

Try adding

[options]
module.system.node.resolve_dirname=node_modules

[cyntler]

I have a similar problem but I do not use React Native.
It's my Flow config:

[ignore]
.*/.cache/.*
.*/dist/.*
.*/test/.*

[include]

[libs]

[lints]

[options]
module.system.node.resolve_dirname=node_modules
module.system.node.resolve_dirname=src

[strict]

All the time I have information:

[flow] Cannot resolve module react-tippy.
module "/Users/sintloer/Development/sintloer.com/client/node_modules/react-tippy/dist/react-tippy"

The module is located in the node_modules directory and yet the error is still there. When I run Flow from the console manually, then there is no error. This is only when using the Flow extension to Visual Studio Code. How to fix it?

---

EDIT:
Okay. It was my fault.
When I removed .*/dist/.* line from [ignore] section all is working.

[michelveloso]

I got the same error, here's my version info:
React Native: 0.55.3
flow-bin: 0.71.0

[maldimirov]

We have the same issue. Flow is complaining about all node_module imports - squel, express, body-parser, etc.
The config is:

[ignore]
.*/node_modules/.*
.*/coverage/.*
.*/dist/.*

[include]

[libs]

[lints]

[options]
all=false
emoji=true
module.system.node.resolve_dirname=node_modules
module.system.node.resolve_dirname=./src

[strict]

And the error Cannot resolve module 'squel.

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

[daneov]

Same here :(

[xtrycatchx]

same problem here:

react-native: 0.56.0
flow-bin: 0.80.0

[xtrycatchx]

same problem here:

react-native: 0.56.0
flow-bin: 0.80.0

the problem with

react-native: 0.57.0-rc.4
flow-bin: 0.80.0

[matascirba1]

the issue appears when you include whole node_modules folder in the [ignore] section of flowconfig, to fix it you can remove node_modules from ignore section and only include separate libs which causes problems.

so this will cause import error:
`[ignore]
./node_modules/.

[include]

[libs]

[lints]

[options]
module.system.node.resolve_dirname=node_modules`

while this will run fine:
`[ignore]

[include]

[libs]

[lints]

[options]
module.system.node.resolve_dirname=node_modules`

[danielrybakov]

None of these solution worked for me:

react_native: 0.57.0
flow_bin: 0.80

Any update ? Thanks you

[zenz]

Same situation here, while using react-native 0.57.0, run flow will get cannot resolve module 'react-native',
while updating to 0.57.1, tons of 'cannot resolve module XXXX' came out.

both using [email protected] as default in init template. cannot figure out where's the problem belongs to.

[thymikee]

Run yarn flow and see what it reports. This extension uses flow server under the hood, so I wouldn't expect it reports something different than the Flow daemon. It's probably not the issue with this extension

[HristoEftimov]

Same here :( I have opened a StackOverflow question, but no help from there, too.

[rmilejcz]

I encountered this error without using the flow-for-vscode plugin so I do not think it is related to the plugin but rather to flow or react-native

I was able to resolve this by creating a directory in my project root called type-def-libs (you can call it anything), and creating a file in that directory called react-native.js containing this:

declare module 'react-native' {
  declare module.exports: any
}

Then adding that folder to my .flowconfig under [libs]:

[libs]
./type-def-libs

I'm not sure why this works, I found this information here and it claims that react-native has no type definition so it is being ignored but I have trouble believing that is the actual issue considering that flow and react-native are developed and maintained by FB.

Worth nothing that that SO answer contains a second suggestion to add flow-typed as a dev dependency and then run yarn flow-typed install but this did not work for me.

[zenz]

my issue solved by upgrading react-native to 0.57.2

"@babel/runtime": "^7.1.2",
"metro-react-native-babel-preset": "0.48.0",

[Topppy]

same problem,
after change

// @flow
import queryString from 'query-string'

to

import queryString from 'query-string'
// @flow

no more error

update：This is the wrong way, don't do it like me.

[mreishus]

@Toppy: That might mean that flow is no longer checking that file at all.

[yerkbn]

You need to install flow-typed globally
sudo npm install -g flow-typed
after that run the command
flow-typed install
which will install all necessary dependencies. However if you use expo probably react native will not installed by flow-typed for that you need to create file in folder flow-typed/npm/react-native_vx.x.x then put this code inside
declare module 'react-native' { declare module.exports: any; }

[Topppy]

@toppy: That might mean that flow is no longer checking that file at all.
you are right.

[prashen]

@rmilejcz Your suggestion worked thanks

[eduardoborges]

module.name_mapper='^~/\(.*\)$' -> '<PROJECT_ROOT>/src/\1'

Resolve for me

[zenz]

Just use [email protected] and then change the .flowconfig to point to version 0.93.0
Then the issue should be solved.

I mean using with [email protected]