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

Thanks @MoOx, this is great!! Any suggestions on a stub for webpack bundle loader?

I was thinking something like this...

module.name_mapper='^bundle?[a-zA-Z0-9$_]+$' -> '<PROJECT_ROOT>/flow/stubs/bundle-loader.js.flow'

require('bundle?lazy&name=bundleName!path/to/file')

Answer 2

In order to not have to declare CSSModule for every project, I've published an npm package that does so:

https://www.npmjs.com/package/css-module-flow

https://github.com/ckknight/css-module-flow

Answer 3

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.