Flow reports "Required module not found" when requiring a .scss file via Webpack

[gcazaciuc]

Using Webpack for build management and an example file like:

require('../css/seed-component.scss');

var React = require('react');

var SeedComponent = React.createClass({
getInitialState: function() {
return { 'data' : 'Seed Component' };
},
render: function(): ?ReactElement {
return (

Header for Seed component

{this.state.data}

Component props

{this.props.name}

);
}
});

When running Flow over it it complains about the line "require('../css/seed-component.scss');" throwing an error "Required module not found" . I believe Flow should check that it's dealing with a JS file before throwing this error since in webpack it is common to require css files and images.
Currently this is a showstopper for me on using Flow and Webpack on a large project. Any suggested work-arounds ?

Thanks!

[tcoopman]

I believe this is a duplicate of #51?

[gcazaciuc]

Indeed, thanks. But still, are there any work-arounds for the issue ?

[johnryan]

@gcazaciuc Did you ever find a solution to this?

I'm using import styles from './Login.scss';

and getting an error. However, for another (regular css file) it works fine:
import styles from './regular_style.css';

[gcazaciuc]

you just need to make sure that the module.name_mapper setting in flowconfig contains mappings for scss file extension and is mapping it to a dummy module.

[marianna-exelate]

Hi,
Can you please be more specific what dummy module configuration is?

[Malax]

@marianna-exelate You can find the documentation about that here: https://flowtype.org/docs/advanced-configuration.html#options

It's basically telling flow to treat such imports (like SCSS files) as another import which flow can actually understand. "Dummy module" just means that that module does not actually do anything besides being there to please flow.

[rofrol]

in .flowconfig

[options]
module.file_ext=.css
module.name_mapper.extension='css' -> 'empty/object'
module.file_ext=.scss
module.name_mapper.extension='scss' -> 'empty/object'

https://gist.github.com/lambdahands/d19e0da96285b749f0ef

[patrykkarny]

@rofrol your solution kills the flow type checking in all *.js, *.jsx files, it should be:

[options]
module.file_ext=.js
module.file_ext=.jsx
module.file_ext=.json
module.file_ext=.css
module.file_ext=.scss
module.name_mapper.extension='css' -> 'empty/object'
module.name_mapper.extension='scss' -> 'empty/object'

Link for docs
https://flow.org/en/docs/config/options

[jantoebes]

@patrykkarny @rofrol

patrykkarny is totally right, it took a while before I discovered that the solution ignores all js type checks

[tomalexhughes]

For those looking for documentation, a lot of the above links are either broken or the pages have been updated. This page currently has information on the module.name_mapper option.

[xuqinggang]

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

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

[zaytsev-mxm]

@patrykkarny thanks, it works — that setting stops flow from showing errors on import of scss files — but now is displays tons of error directly in scss-files, like this:

Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ src/desktop/routes/register/Register.scss:1:1

Unexpected token .

     1│ .root {
     2│   padding-left: 20px;
     3│   padding-right: 20px;
     4│ }

Looks like flow tries to import these files content as is – but webpack is configured to load them es ES modules
I have no idea how to fix that – may be you have any thoughts?

[spaquis]

@patrykkarny thanks, it works — that setting stops flow from showing errors on import of scss files — but now is displays tons of error directly in scss-files, like this:

Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ src/desktop/routes/register/Register.scss:1:1

Unexpected token .

     1│ .root {
     2│   padding-left: 20px;
     3│   padding-right: 20px;
     4│ }

Looks like flow tries to import these files content as is – but webpack is configured to load them es ES modules
I have no idea how to fix that – may be you have any thoughts?

Hi, I have the same problem... Could you fix this ?

[q2870030]

@zaytsev-mxm, @Nachosss

I am facing the same issue (no error is import scss files, but errors occurs inside the actual scss file). Could you please share the solution if you found one? Thanks.

[rofrol]

@q2870030

try this #338 (comment)