Skip to content

Instantly share code, notes, and snippets.

@MoOx
Last active July 12, 2018 01:44
Show Gist options
  • Save MoOx/12ac2bee8d876a5c1fe1593e4815895d to your computer and use it in GitHub Desktop.
Save MoOx/12ac2bee8d876a5c1fe1593e4815895d to your computer and use it in GitHub Desktop.
flow config webpack adjustements to avoid the "Required module not found" for png, css, svg etcc
# ...
[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
type CSSModule = { [key: string]: string }
const emptyCSSModule: CSSModule = {}
export default emptyCSSModule
// @flow
const s: string = ""
export default s
@tonyxiao
Copy link

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

@jvalente
Copy link

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

@AlicanC
Copy link

AlicanC commented Jul 28, 2016

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;

@acusti
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:

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

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