Hot reload not updating the style for CSS Module in a React component

[kevinlaw91]

When scss file is imported into a React component like this, hot reloading does not work as expected. The scss module was injected/replaced correctly, but new update was not applied.

import styles from "./Foo.scss";
class Foo extends React.Component {
 // ...
}

Let me clarify this. The old style is removed by style-loader, but the updated new style does not get injected back, causing component loses all of their styles no matter old or updated ones.

After some research I believe the problem is here:
https://github.com/webpack/style-loader/blob/master/index.js#L23

If I removed the if... statement, hot reloading will then work correctly, and doesn't seems like it will break anything.

		"	// When the styles change, update the <style> tags",
-		"	if(!content.locals) {",
		"		module.hot.accept(" + loaderUtils.stringifyRequest(this, "!!" + remainingRequest) + ", function() {",
...
-		"	}",

I can create a PR for this. But I want don't want remove the if... statement just like that. @sokra May I know what is the purpose of this check? Thanks.

[kevinlaw91]

Cannot reproduce anymore after some fix to configuration. Sorry.

[Benno007]

Hey @kevinlaw91 , just wondering what your configuration is? We have the exact same issue with CSS modules and react hot reloader. It's basically useless for us and we have to refresh the page each time.

[kevinlaw91]

@Benno007, If I remember correctly I fixed it by changing webpack dll config. I removed react-hot-loader and some others. HMR works perfectly since then. Maybe you can try removing some and try if it works for you. Cheers.

[AStaroverov]

Hi. Im remove this lines and hmr work correct for me.
How i understand, when i use css?modules and use something like

import style from './style'

...

render () { return <div className={style.someClass} /> }

style loader begins to depend on react and can not apply hot reload.

Can i resolve it without removing this lines?

[shikelong]

How to fix it without change style-loader's source code? I meet the same issue.