Skip to content

Instantly share code, notes, and snippets.

@MoOx

MoOx/.flowconfig

Last active Jul 12, 2018
Embed
What would you like to do?
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
@MoOx

This comment has been minimized.

@oliverturner

This comment has been minimized.

Copy link

@oliverturner oliverturner commented May 24, 2016

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

@tonyxiao

This comment has been minimized.

Copy link

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

@jvalente

This comment has been minimized.

Copy link

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

@AlicanC

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

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