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 module not found 

I have a structure like ComponentName→(index.js, index.css), so that each component has all dependencies inside.

I tried this hack but it didn't work for me. Could I just ignore it somehow?

Answer 1

Add this to your flow config

[options] module.name_mapper.extension='css' -> '<PROJECT_ROOT>/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' -> '<PROJECT_ROOT>/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\)$' -> '<PROJECT_ROOT>/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.