flow config webpack adjustements to avoid the "Required module not found" for png, css, svg etcc

.flowconfig

# ...

[options]
# webpack loaders
module.name_mapper='.*\.css$' -> '<PROJECT_ROOT>/flow/stub/css-modules.js'
module.name_mapper='.*\.\(svg\|png\|jpg\|gif\)$' -> '<PROJECT_ROOT>/flow/stub/url-loader.js'

flow__stub__css-modules.js

// @flow
type CSSModule = { [key: string]: string }
const emptyCSSModule: CSSModule = {}
export default emptyCSSModule

flow__stub__url-loader.js

// @flow
const s: string = ""
export default s

Explained at https://stackoverflow.com/questions/36912675/flow-required-module-not-found/37272883#37272883

@MoOx you're an absolute legend :) thanks so much for being such a huge help!

Followed exactly but doesn't seem to be working. What version of flow are you using? latest version 0.28 or something else? @MoOx

@tonyxiao, I was able to yield the expected result w/ v0.28.
Make sure you use module.name_mapper='.*\.css$' like presented here instead of module.name_mapper.extension='css' like presented on the SO explanation.

I think you should just declare types instead of exporting actual objects.

CssStub.js

/* @flow */

declare export default {[key: string]: string};

FileStub.js

/* @flow */

declare export default string;

👍 on directly declaring the export default type. Nice approach.

Also, 👍 on not using the module.name_mapper.extension shorthand, as @jvalente instructed. I was unable to configure multiple module.name_mapper directives and have them work well together when using the .extension version and couldn’t figure out why. Specifically, I needed to be able to use the css stub for module names matching '.*\.css$', but overriding that if the module name starts with !raw! to use the file stub (export string) version. Here’s what worked:

.flowconfig

module.name_mapper='^!raw!.*$' -> '<PROJECT_ROOT>/flow/stub/url-loader.js'
module.name_mapper='.*\.css$' -> '<PROJECT_ROOT>/flow/stub/css-modules.js'

However, when I had the same config, just with module.name_mapper='.*\.css$' -> '<PROJECT_ROOT>/flow/stub/css-modules.js replaced with module.name_mapper.extension='css' -> '<PROJECT_ROOT>/flow/stub/css-modules.js', that name_mapper overrides the !raw! name_mapper and makes flow think that import Raw from '!raw!./style.css will import an object.