Flow “Required module not found” when importing a CSS file

Question

When I try to import CSS via webpack(import (./index.css)) I\'m getting this error:

3: import \'./index.css\';
          ^^^^^^^^^^^^^ ./index.css. Required modu         


        

Answer 1

Add this to your flow config

[options]
module.name_mapper.extension='css' -> '/CSSModuleStub.js'

And add create a file to your root CSSModuleStub.js:

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

If you want clean path, you can adjust like this

[options]
module.name_mapper.extension='css' -> '/flow/stub/css-modules.js'

And so rename CSSModuleStub.js to flow/stub/css-modules.js.

---

While we are at it, if you need some others stubs (eg: for url-loader) here is another example

Create flow/stub/url-loader.js

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

And add

module.name_mapper='.*\.\(svg\|png\|jpg\|gif\)$' -> '/flow/stub/url-loader.js'

if you use url-loader for svg, png, jpg and gif. This will allow Flow to make the correct module replacement (url-loader returns a string (base64 or file-loader path).

For example if you do

import logoSVG from "./logo.png"
logoSVG.blah.stuff() // <-- flow will throw here

Flow will throw an error.