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'
Did anyone find a solution to this?
Didn't get any response 馃槩, and don't want to use relative path. This is so unfair 馃槥
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 - https://github.com/ChristianKohler/PathIntellisense/issues/86
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.
@Noitidart nope I have an "unable to resolve module". Did you add something specific to make it work ?
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).
I found a workaround for this drawing on @bulby97, https://github.com/facebook/flow/issues/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";
Thanks for sharing that awesome bit @LordParsley ! I didn't test it but it looks pretty solid!
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!
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.
Thanks @BenFlanagan very much for sharing that!!
/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.
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.
Most helpful comment
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 tonode_modules/foo
, orsrc/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 undersrc
, 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
:This will first check
node_modules
, and if that doesn't exist, it'll checksrc
, which aligns with how I've configured webpack for my build.