Webpack alias is not recognized by flow

Question

I'm having some trouble with webpack aliases and having it play nicely with flow.

I have the alias:

    alias: {
        vue$: 'vue/dist/vue.esm.js',
        puma: path.resolve(__dirname, 'assets/app/stores/clothes'),
    },

and I'm using it within my components by importing as such:

     import components from "puma/components"

For my flowconfig, I have it setup as:

 module.name_mapper='^puma\/.*' -> 'puma/\1'

and I'm really unsure of how this OCaml type of regex works... and I need some help.

The end goal of this post would be to be able to resolve the error:

     ^^^^^^^^^^^^^^^^ puma. Required module not found

Answer 1

Figured it out!

I just didn't quite understand what was going on in the name_mapper, and I still don't fully understand it, but my guess is this:

flow parses through your files, and then when it gets to the import, I think it does some checking to its name_mappers to see if the import syntax is an alias or needs to be mapped to something else. In this case, when it got to puma, there is no directory named puma in the codebase but there happened to be a name_mapper in the .flowconfig that fit its regex, so it went down the mapped path to assets/app/puma/clothes.

The regex I applied wasn't right, and I ended up using something similar like: module.name_mapper='^puma' -> 'assets/app/stores/clothes' to get it to work.

One question I do have... is how big of an impact does this have on performance? Does flow now check every import against the name_mapper to see if there's a mapping? Does adding new name_mapper greatly decrease the parsing speed of flow?

If anyone knows, I'd be very curious in hearing it.