how to have flow resolve the aliases ?

[Falieson]

Flow error

Launching Flow server for /Users/florian/Code/Public/PlanetX/boilerplate-crater
Spawned flow server (pid=54050)
Logs will go to /private/tmp/flow/zSUserszSflorianzSCodezSPubliczSPlanetXzSboilerplate-crater.log
src/universal/routes/home.js:2
  2: import type { Store } from 'universal/flowtypes/redux'
                                ^^^^^^^^^^^^^^^^^^^^^^^^^^^ universal/flowtypes/redux. Required module not found

resolve portion of my webpack config

import path from 'path'
const root = path.resolve(__dirname, '..')

const aliases = {
  client   : `${root}/src/client`,
  modules  : `${root}/src/modules`,
  routes   : `${root}/src/universal/routes`,
  server   : `${root}/src/server`,
  universal: `${root}/src/universal`
}

const resolve = {
  extensions: ['.js', '.jsx'],
  alias     : aliases
}

export default resolve

.babelrc

  "env": {
    "dev": {
      "plugins": [
        [ "babel-plugin-webpack-alias", { "config": "./webpack/webpack.config.dev.js" } ]
      ]
    },
    "prod": {
      "plugins": [
        [ "babel-plugin-webpack-alias", { "config": "./webpack/webpack.config.prod.js" } ]
      ]
    },

package.json

{
  "dependencies": {
    "babel-runtime": "^6.11.6",
    "bcrypt": "^1.0.2",
    "debug": "^2.5.2",
    "es6-promisify": "^5.0.0",
    "express": "^4.14.0",
    "immutable": "^3.8.1",
    "meteor-node-stubs": "^0.2.6",
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "react-dom-stream": "^0.5.1",
    "react-redux": "^5.0.4",
    "react-router": "^3.0.5",
    "react-router-redux": "^4.0.8",
    "redux": "^3.5.2",
    "redux-immutablejs": "0.0.8"
  },
  "devDependencies": {
    "assets-webpack-plugin": "^3.5.1",
    "async-child-process": "^1.1.1",
    "babel-cli": "^6.24.1",
    "babel-core": "^6.24.1",
    "babel-eslint": "^7.2.3",
    "babel-loader": "^6.4.1",
    "babel-plugin-add-module-exports": "^0.2.1",
    "babel-plugin-istanbul": "^3.1.2",
    "babel-plugin-meteor-imports": "^1.0.3",
    "babel-plugin-module-resolver": "^2.7.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-object-rest-spread": "^6.23.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-plugin-webpack-alias": "^2.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-es2015-node5": "^1.2.0",
    "babel-preset-es2017": "^6.24.1",
    "babel-preset-flow": "^1.0.0",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-1": "^6.24.1",
    "babel-register": "^6.24.1",
    "chai": "^3.5.0",
    "coveralls": "^2.13.0",
    "crater-util": "^1.2.2",
    "cross-spawn": "^5.1.0",
    "css-loader": "^0.28.0",
    "dotenv": "^3.0.0",
    "empty": "^0.10.1",
    "es6-promise": "^4.1.0",
    "eslint": "^3.19.0",
    "eslint-config-planetx": "^0.1.7",
    "eslint-import-resolver-babel-module": "^3.0.0",
    "eslint-watch": "^3.1.0",
    "extract-text-webpack-plugin": "^2.1.0",
    "file-loader": "^0.9.0",
    "flow-bin": "^0.44.2",
    "flow-typed": "^2.1.2",
    "flow-watch": "^1.1.1",
    "glob": "^7.1.1",
    "happypack": "^3.0.3",
    "http-proxy": "^1.16.2",
    "istanbul": "^0.4.5",
    "json-loader": "^0.5.4",
    "meteor-imports-webpack-plugin": "^2.0.4",
    "mkdirp": "^0.5.1",
    "mocha": "^3.2.0",
    "node-inspector": "^0.12.10",
    "nyc": "^8.4.0",
    "phantomjs-prebuilt": "^2.1.14",
    "postcss-loader": "^0.13.0",
    "postcss-modules-values": "^1.2.2",
    "pre-commit": "^1.2.2",
    "progress-bar-webpack-plugin": "^1.9.3",
    "raw-loader": "^0.5.1",
    "react-hot-loader": "^3.0.0-beta.6",
    "redux-logger": "^2.10.2",
    "rimraf": "^2.6.1",
    "smart-restart": "^1.1.1",
    "style-loader": "^0.13.2",
    "url-loader": "^0.5.8",
    "wdio-mocha-framework": "^0.5.10",
    "wdio-phantomjs-service": "^0.2.2",
    "wdio-spec-reporter": "^0.1.0",
    "webdriverio": "^4.7.1",
    "webpack": "^2.4.1",
    "webpack-dev-middleware": "^1.10.2",
    "webpack-hot-middleware": "^2.18.0",
    "webpack-node-externals": "^1.5.4"
  }
}

[Falieson]

You can close the ticket

The answer is to add the map to .flowconfig for each alias like below

.flowconfig

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

[tgallacher]

@Falieson

Just a tip, as I recently went through the fun of fighting with Flow and Webpack aliases, but if all your aliases share a common parent, let's say ./src/js relative to your root (where your .flowconfig file lives), then you can use flow's resolve_dirname option.

This works like Webpack 2's resolve.modules option. So you would have

[options]
module.system.node.resolve_dirname=src/js

Then you could reference all folders/files without including the src/js part. This is useful as it's a onetime setup. The name_mapper options allow you to add single entries where the above doesn't apply, for example, if you have a Webpack alias for deep: '/src/js/super/deep/ then you could add

[options]
module.name_mapper='^deep\/\(.*\)$' -> '<PROJECT_ROOT>/src/js/super/deep/\1'

This would allow you to then do import blah from 'deep/blah' and Webpack / Flow would all be good.

Hope that helps.

[mikeaustin]

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

Should this also work for files outside the project root?

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

[itsnotrisky]

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

Should this also work for files outside the project root?

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

Tried this on my project doesn't seem to work, interested to know if it is actually possible.