HMR does not work as of 1.0.0

[phaistonian]

• Operating System: OSX
• Node Version: Latest
• NPM Version: Latest
• webpack Version: Latest
• style-loader Version: 1.0.0

Expected Behavior

HTR to work as before 1.0.0

Actual Behavior

Ignored an update to unaccepted module kind of errors are thrown and full-reload takes place whenever a change is made in content passed to style-loader.

How Do We Reproduce?

Not sure - I guess try changing css content using the latest version of style-loader.

[alexander-akait]

yes, because you use css modules and previously behavior break many other cases, it was invalid solution and we revert this

From changelog:

restore original hot reloading behaviour for locals (#419) (f026429)

We implement new HMR api for webpack@5 and it will be possible, right now it is won't fix

[alexander-akait]

@phaistonian anyway please create reproducible test repo to ensure it is situation described above

[phaistonian]

So, HMR will be working as it should when webpack 5 is released and until then we should revert to a version < 1.0, yes?

[alexander-akait]

@phaistonian hmr works fine if you don't use css modules, if you use css modules you will get full reload with style-loader, if you revert to old version you get invalid hmr behavior what potentially break app in some cases in dev mode, anyway please create minimum reproducible test repo

[phaistonian]

@evilebottnawi Will try to - once I get some free time.

Thank you.

ps: I am not using CSS modules, the setting in css-loader is the default, i.e false.

[alexander-akait]

@phaistonian should work, maybe bug, wait reproducible test repo and help you

[laino]

It's also broken for me. Just using style-loader, css-loader, sass-loader. With default settings.

[alexander-akait]

PLEASE create minimum reproducible test repo, message like It's also broken for me is not help

[Yegorich555]

@phaistonian hmr works fine if you don't use css modules, if you use css modules you will get full reload with style-loader, if you revert to old version you get invalid hmr behavior what potentially break app in some cases in dev mode, anyway please create minimum reproducible test repo

I agree. Previous version of style-loader works fine even with css-modules. HMR in the version 1.0.0 doesn't work as expected only with css-modules. I'm frustrated of this. Css-modules mustHave for me and I can't work without HMR at all. And I've never had potentially breaking app in some cases in dev mode with previous versions. Can it be fixed for the latest version?
The repo for reproducing you can find here: https://github.com/Yegorich555/FromScratch_React/tree/styleloader-update

[alexander-akait]

@Yegorich555 previously version style-loader didn’t work correctly, even if everything seemed to be right for you, technically it was done incorrectly and led to problems in many places, it can be fixed only introducing new hot api, and in theory can be done for webpack@5. What is problem? Refreshing is very fast

[Yegorich555]

The main problem is not in the speed of refreshing but in refreshing in general. For example I'm developing some view or component which is deeply nested and with refreshing everything is lost. And I need to go to the exact view by clicking 4 times (on some buttons) and filling forms and submitting 2 forms, for example. You can imagine how much time I spend with such refreshes (during the css bug-fixing for example).

So I got your point on the latest update and it's fine that it works in the right way, but hot-reload with css-modules is not only convenient but it decreases time of developing also. In this case I can't use the latest update. Time of developing is number 1 for me.

Could you add some points in Readme and Changelog that can clarify breaking changes for css-modules hot reload?

[alexander-akait]

@Yegorich555 yep, in near future, maybe we can implement new hot API for webpack@5 and do backport for webpack@4 it is allow to improve this, but unfortunately i don't have enough time and it can take a lot of time

[phaistonian]

So, to recap:

• We can't have hot-reloading with 1.0.0
• We might have it again when Webpack 5 is a released via a new API

yes?:)