Flow typechecking fail when importing via absolute path with react-native

[smontlouis]

Flow doesn't correctly resolve types when it is imported via absolute path.
I'm using react-native.

Here is an example:

/src/package.json (according to this

{ "name": "@src" }

/.flowconfig

module.name_mapper='@src/helpers/verseToStrong' -> '<PROJECT_ROOT>/src/helpers/verseToStrong.js' // testing directly in case this was related with bad regexp
module.name_mapper='^@src\(.*\)$' -> '<PROJECT_ROOT>/src/\1'

[Noitidart]

Did anyone find a solution to this?

[smontlouis]

Didn't get any response 😢, and don't want to use relative path. This is so unfair 😞

[Noitidart]

By the way what editor are you using? Is that VSCode? Do you have an extension that does intellisense on absolute paths with that package.json trick? I use this extension - and created an issue there - ChristianKohler/PathIntellisense#86

[Noitidart]

Hey @bulby97 - it seems if you don't use the package.json trick, and instead do a absolute path from the workspace root, so /src/types it should work. May you please test.

[smontlouis]

@Noitidart nope I have an "unable to resolve module". Did you add something specific to make it work ?

[Noitidart]

Oh you're right, I don't know what I did before, it doesn't work. I think maybe I hadn't let the flow processing intelli sense completely end (i rely on vscode extension rather then command line).

[LordParsley]

I found a workaround for this drawing on @bulby97, #101 and https://github.com/cdebotton/react-universal/blob/master/.flowconfig:

.flowconfig

[ignore]
.*/node_modules

[include]
./src/

[libs]

[lints]

[options]

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

Elsewhere, all of these are valid for me now (assuming @views and views declared in package.json):

import Home from "@views/Home/Home.container";
import BlankPage from "views/BlankPage/BlankPage.container";
import Sidebar from "./views/Sidebar/Sidebar.container";

[Noitidart]

Thanks for sharing that awesome bit @LordParsley ! I didn't test it but it looks pretty solid!

[bondparkerbond]

I had a similar problem with a new Create React App and the latest flow version. I had absolute imports from inside the src directory and @LordParsley 's solution of adding each sub folder there worked great for me:

[options]

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

So happy I don't need to choose between flow and absolute imports!

import Box from 'components/box/Box'; works!

[BenFlanagan]

I also had a similar problem, but none of these answers were quite working for me.

The main difference was that I include modules without any special namespace; e.g. import foo from 'foo' could refer to node_modules/foo, or src/foo if it doesn't exist in node_modules (arguably not the safest rule -- in fact, it breaks code linking in some edge scenarios -- but it's what I've got 😎). I could have done something like what @bondparkerbond suggested for each of the modules directly under src, but I have about 50 of them and wanted a simpler solution.

I found something that worked for me over at #382, and since I found this thread when I searched for my problem, I thought it might be helpful to post it here:

in .flowconfig:

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

This will first check node_modules, and if that doesn't exist, it'll check src, which aligns with how I've configured webpack for my build.

[Noitidart]

Thanks @BenFlanagan very much for sharing that!!

[shinsuny]

/path/to/project/node_modules/.bin/flow stop
/path/to/project/yarn run flow (or your flow invoking script)

this fixed the problem for me.

[danielo515]

I have a similar problem than @BenFlanagan , but in my case the imported module is on a sibling folder. This is my config:

module.name_mapper='^spring' ->'<PROJECT_ROOT>/../spring/src'

I do't get any errors, but I don't get any intellisense or type errors either, to it makes flow useless for type checking our internal library.