React: Flow: Import a local js file - cannot resolve issue module

Question

I am using Flow: Static type checking library for react front end application, it throws "cannot resolve" for internal imports from src directory:

Example in file at path: src/abc/def/ghi/hello.jsx, I am using the following import:
import words from '../words';

--> Throws error "Cannot resolve module ../words

words.js is in src/abc/def dir

EDITED: My .flowconfig looks like this after I installed flow-typed:

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


[include]
.*/src/.*
.*/test/.*

[libs]
flow-typed

[lints]

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

[strict]

How do I map flow for such imports in .flowconfig file ?

Thanks in advance.

Ulotrichous

Try import {words} – Scaler

Sorry, { words } doesn't seem to work. Still shows the same error. – Ulotrichous

flow didn't support relative path yet. you should use complete path to fix this error. – Piselli

Answer 1

Got it working.

Relative paths don't really work with Flow.

We need to map imports from Project root for Flow to understand.

I changed my import to

import words from 'def/words';

Add the following to your .flowconfig file

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

Fixes above error.

Ulotrichous

Answer 2

To get to ./def from ./hello.jsx, you have to go up another directory

import words from '../../words';

Ulrich

I don't think so, when I hover click the '../words' it takes to the right file not when I mention '../../words', and the import worked perfectly fine and app runs fine too, its just after I started to use FLOW for static type checking, it has something to do with name_mapper in FLOW which I am unable to configure in .flowconfig. – Ulotrichous

hmm, try module.system=haste flow.org/en/docs/config/options/#toc-module-system-node-haste – Ulrich

Sorry, doesn't work. Haste is mostly for react-native and also read that it is deprecated. – Ulotrichous

Answer 3

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

Cyclone

Answer 4

In my case problem was that I use relative paths with webpack e.g

resolve: {
    modules: [
         path.resolve(__dirname, 'src'),
         ...
    ]
}

So, I can import my custom module from src like that (without write src/)

import CustomModule from 'pages/CustomModule'

But flow doesnt now about that webpack config, so I must add in my .flowconfig file next code

[options]
module.name_mapper='src' -> '<PROJECT_ROOT>/src'

More info

about flow options

about name_mapper

Pippin