Configure absolute paths with Create React App and Flow

It took me some time to aggregate the information to configure CRA project with flow to handle absolute paths in import statements, so I decided to document the steps I took to make it work.

I have the following versions of related packages:

react-scripts v1.1.4
flow v0.72.0
eslint-plugin-import v2.10.0

TL;DR

Create .env file in project root with the following content

NODE_PATH=src/

Add the following content to you .eslintrc file (ensure you have eslint-plugin-impoty installed in your devDependencies)

{
...
  "settings": {
    "import/resolver": {
      "node": {
        "moduleDirectory": ["node_modules", "src/"]
      }
    }
  }
}

Add the following content to your .flowconfig file

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

VSCode

To make VSCode understand absolute paths create jsconfig.js and add the following content

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "*": ["src/*"]
    }
  }
}

Intellij Idea

To make Intellij Idea stop complaining about absolute paths right-click on src folder Mark Directory as Sources root.