Remove module.name_mapper.extension from docs

[MoOx]

I am using flow 0.25 and this does not works as I am getting this error

.flowconfig:20 Unsupported option specified! (module.name_mapper.extension)

[jeffmo]

Hmm that's odd, this is supposed to work... (See https://github.com/facebook/flow/blob/master/src/common/flowConfig.ml#L455)

Can you post your full .flowconfig so I can try and repro?

[MoOx]

Note that I found several comment "on the internet" (github threads, stackoverflow, gist comments) of people reporting this exact same error message with flow 0.22+

But please, don't laugh: I play maybe too long with flow config and I cannot reproduce.
I think I might have removed a global install that was 0.22.

Want I want is simple: I use webpack and so "import" some CSS and png so I tried something like this:

[ignore]
.*/node_modules/.*
.*/lib/.*
.*/.nyc_output/.*
.*/__tests__/.*

[include]
node_modules

[libs]
node_modules/flow-interfaces/interfaces
node_modules/iflow-material-ui/index.js.flow
node_modules/iflow-color/index.js.flow
flow-interfaces

[options]
esproposal.class_instance_fields=enable
esproposal.class_static_fields=enable

module.name_mapper='.*\.css$' -> 'CSSModule'
module.name_mapper='.*\.(svg|png|jpg|gif)$' -> 'string'

The only 2 interesting lines are the last ones.

This does not work as expected as I am getting this kind of errors.

web_modules/Icon/icons/index.js:3
  3:   "circle-in-circle": require("./circle-in-circle.svg"),
                           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ./circle-in-circle.svg. Required module not found

web_modules/InputPhone/index.js:6
  6: import "react-intl-tel-input/dist/main.css"
            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ react-intl-tel-input/dist/main.css. Required module not found

web_modules/InputText/index.js:7
  7: import styles from "./index.css"
                        ^^^^^^^^^^^^^ ./index.css. Required module not found

I think most people are stuck in this step. You define a mapper rule but it does not (seem to) work.

---

After some reading some comments everywhere I found this

module.system=haste

Using this, some error are gone (all the one related to .css files).
No idea why it "works" for .css files and not the other. This is another weird behavior.

I read somewhere else (and I think in a previous issue @samwgoldman told me this too) that this is not a good idea to use haste when I should use node (my context is: front end web app built with webpack).

So I removed this line and found module.file_ext.
So I used this

module.file_ext=
module.file_ext=.js
module.file_ext=.json

This is the same thing I am using in my webpack config to allow me to import/require other files extensions like css and svg:

  resolve: {
    extensions: [ "", ".js", ".json" ],
  }

So with this flow config

###
# Webpack config adjustements
###

## allow no extensions
## to be able to import .css,svg,png ...
module.file_ext=
module.file_ext=.js
module.file_ext=.json

## loaders
module.name_mapper='.*\.css$' -> 'CSSModule'
module.name_mapper='.*\.(svg|png|jpg|gif)$' -> 'string'

I still have one issue

web_modules/InputPhone/index.js:6
  6: import "react-intl-tel-input/dist/main.css"
            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ react-intl-tel-input/dist/main.css. Required module not found

And only haste seems to help me in my case. This is another weird behavior.

But back to module.name_mapper.extension. I tried this

module.name_mapper.extension='css' -> 'CSSModule'
module.name_mapper.extension='svg' -> 'string'
module.name_mapper.extension='png' -> 'string'

And now it works (EXCEPT the last issue about the css in node_modules folder, but I guess it's a resolution issue, not an issue related to the name_mapper).

So maybe in the first place, my issue were not using the appropriate version (I have ./node_modules/.bin in my PATH, but for some reason, the global installed version (found using which flow) was taking the lead).

---

PROPOSAL: If my config is correct (the one using an empty module.file_ext=) we should add this the doc near to the name_mapper so people avoid having issue like I did (because I think it's related).

PS: If you have a tip to avoid having the module.system=haste, I will take it :D

[MoOx]

I also found something weird: if I remove all the config about name_mapper and only keep the module.file_ext, I got not error (except the one for react-intl-tel-input/dist/main.css). It's really confusing to have some differences between node_modules and local files. Did I messed up something in my config?

[MoOx]

Some example of people having issue without haste

• https://gist.github.com/lambdahands/d19e0da96285b749f0ef#gistcomment-1766247
• Ignore non-JS requires like require('image!Kitten') #345 (comment)

[MoOx]

I am closing this PR, but I really thing there is definitely an issue somewhere

#1068 (comment)

[jeffmo]

Wow thanks for such a detailed explanation! Ok, so let me break it down a little bit:

---

I think most people are stuck in this step. You define a mapper rule but it does not (seem to) work.

Yea, writing raw name_mappers is definitely confusing (mostly because we use OCaml's regexp syntax -- which is a little confusing and easy to mess up). This is why I added the module.name_mapper.extension config option a little while back -- to help ease the pain for the common case (the case where you just want to map files with a certain extension to a "mock" file).

---

But back to module.name_mapper.extension. I tried this

module.name_mapper.extension='css' -> 'CSSModule'
module.name_mapper.extension='svg' -> 'string'
module.name_mapper.extension='png' -> 'string'
And now it works

Ok, so I expect that what's going on here is that you're mapping to a global module name (not a path to a module -- which is how node module resolution works).

Long Story Short:

So if you want to map all .css files to a module that sits under /path/to/project/CSSModule.js, you'd want to do this:

module.name_mapper.extension='css' -> '<PROJECT_ROOT>/CSSModule.js'

You can think of name_mappers as just a raw search/replace in your source code that happens just before Flow reads the code.

So if you were mapping 'css' -> 'CSSModule', that would take code like this:

import "react-intl-tel-input/dist/main.css";

and it would tweak it to this:

import "CSSModule";

The problem is that, in node, "CSSModule" means a package named "CSSModule" (not a file). As such, you probably just need to use the <PROJECT_ROOT> token on the right hand side of the arrow to give an explicit path to the file you're trying to map to.

haste is a weird module system that we use internally at FB that is non-standard (and almost nobody else uses it). It is kinda like the node system, but it has various quirks and rules that probably aren't worth your time trying to battle with. I suspect one of these quirky rules caused the config option to work for you (but likely only out of luck). I would agree with @samwgoldman here and recommend that you avoid the haste system if you can make this work without it.

---

So I removed this line and found module.file_ext.

This config option just lets you tell Flow to find files with an extension other than .js or .jsx (some people use other extensions like .es/.es6/.mjs/etc). Given your webpack configuration of .js and .json, I think the defaults in Flow will do what you want -- so I don't think these are necessary (though they probably don't hurt anything leaving them there).

[MoOx]

Thanks for the explanation I think I get it now.

[MoOx]

Now I get it :) #1068 (comment)