29

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?

Rory O'Kane
  • 25,436
  • 11
  • 86
  • 123
Roman Makarov
  • 313
  • 3
  • 8

3 Answers3

56

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.

MoOx
  • 6,462
  • 4
  • 32
  • 32
  • 1
    This is super useful, it would be great to have this referenced from the official docs. – ctrlplusb Jul 05 '16 at 12:55
  • Is there any way of handling this problem if no file extension is provided in the `import`/`require`? – Victor May 11 '17 at 17:17
  • 1
    @ctrlplusb, this is now in the official docs [here](https://flow.org/en/docs/config/options/#toc-module-name-mapper-regex-string) – Victor May 11 '17 at 17:19
1

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

ckknight
  • 5,303
  • 4
  • 22
  • 23
0

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')
Greg
  • 1,005
  • 4
  • 13
  • 29
  • Sorry I am not familiar with bundle-loader :/ – MoOx Aug 25 '16 at 13:42
  • What I'm doing for bundle-loader is: `module.name_mapper='bundle.*?\!\(.*\)'->'\1'`. The annoying part is that with other aliases that we have mapped, I may have to add another version with the bundler. – kalley Jan 19 '17 at 22:42