Flow module not found with .scss file

Question

I have a file using scss with css-modules like so:

import styles from './Login.scss';

The webpack build works fine but i'm getting a flow error: Required Module Not Found

In my .flowconfig I have

[ignore]
.*/node_modules/fbjs/.*
.*/app/main.js
.*/app/dist/.*
.*/release/.*
.*/git/.*

[include]

[libs]

[options]
esproposal.class_static_fields=enable
esproposal.class_instance_fields=enable
esproposal.export_star_as=enable
module.name_mapper.extension='css' -> '<PROJECT_ROOT>/flow/CSSModule.js.flow'
module.name_mapper.extension='styl' -> '<PROJECT_ROOT>/flow/CSSModule.js.flow'
module.name_mapper.extension='png' -> '<PROJECT_ROOT>/flow/WebpackAsset.js.flow'
module.name_mapper.extension='jpg' -> '<PROJECT_ROOT>/flow/WebpackAsset.js.flow'
suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe
suppress_comment=\\(.\\|\n\\)*\\$FlowIssue

I've also seen https://github.com/facebook/flow/issues/338 but it doesn't really have any solution.

Has anyone found a workaround for this issue?

Answer 1

This error can be fixed by assigning .scss files to an empty module. I just npm installed empty and added this to the .flowconfig : module.name_mapper.extension='scss' -> 'empty/object'

Answer 2

A better solution for this error is to use the css-modules-flow-types webpack plugin to generate flow types for your CSS modules.

Flow doesn't know about the scss extension, so you need to add the following to your .flowconfig, in the [options] section:

; Extensions
module.file_ext=.js
module.file_ext=.jsx
module.file_ext=.json
module.file_ext=.css
module.file_ext=.scss

You should also add *.scss.flow to your .gitignore. These files shouldn't be checked in because they are automatically generated during the webpack build.

Answer 3

We can use module.name_mapper.extension to replace types for imported module on Object

module.name_mapper.extension - Specify a file extension to match, and a replacement module name, separated by a ->.

add option to .flowconfig file

// .flowconfig
[options]
module.name_mapper.extension='scss' -> '<PROJECT_ROOT>/flowconfig.mock-module.js'

create new file

// flowconfig.mock-module.js
export default Object;

Answer 4

added all the file types I wanted flow to recognize in .flowconfig file

[options]    
module.file_ext=.js
module.file_ext=.json
module.file_ext=.jsx
module.file_ext=.css
module.file_ext=.scss