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.

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.

Answer 2

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

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