Skip to content

Instantly share code, notes, and snippets.

Last active Jul 12, 2018
What would you like to do?
flow config webpack adjustements to avoid the "Required module not found" for png, css, svg etcc
# ...
# 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
type CSSModule = { [key: string]: string }
const emptyCSSModule: CSSModule = {}
export default emptyCSSModule
// @flow
const s: string = ""
export default s
Copy link

MoOx commented May 18, 2016

Copy link

oliverturner commented May 24, 2016

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

Copy link

tonyxiao commented Jul 12, 2016

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

Copy link

jvalente commented Jul 12, 2016

@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.

Copy link

AlicanC commented Jul 28, 2016

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


/* @flow */

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


/* @flow */

declare export default string;

Copy link

acusti commented Sep 15, 2016

👍 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:


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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment