Please clarify wether HMR should work in the new version

[swernerx]

I just want to figure out wether HMR should work with the newest version. I am using the newest version of both this plugin and webpack. It seems that CSS changes are correctly triggering HMR, but in the end nothing happens. This is the client-side log output:

｢hot｣ App updated. Recompiling src/components/card/Card.module.css
log.js:48 ｢hot｣ webpack: Compiling (<unnamed compiler>)
log.js:48 ｢hot｣ App Updated, Reloading Modules
log.js:48 ｢hot｣ Checking for updates to the bundle.
log.js:48 ｢hot｣ No Modules Updated.
log.js:48 ｢hot｣ App is up to date.

Re-loading the app manually works fine though.

This is my loader config for CSS files:

{
  test: /\.module\.(css|sss|pcss)$/,
  use: [
    extractCssLoader,
    "cache-loader",
    "thread-loader",
    {
      loader: "css-loader",
      options: {
        import: false,
        minimize: false,
        sourceMap: true
      }
    },
    {
      loader: "postcss-loader",
      options:{
        sourceMap: true
      }
    }
  ]
}

Any hints? Previously with mini-css-extract-plugin I used the style-loader during development. Is this also the way to go with this plugin?

[ScriptedAlchemy]

Yes the app does does reload,can you send me your full webpack config? Also are you using webpack 4?

[swernerx]

I mean the idea with HMR is that it should not reload, right?

My Webpack config is somewhat generated.

My issue is that with the old approach of using "style-loader" in development HMR works as expected while when using this plugin it just doesn't seem to correctly trigger the required changes.

[swernerx]

Seems like Webpack itself is doing fine:

98% after emittingCompleted client bundle in 2.914s!
ℹ ｢hot｣: webpack: Compiling Done
ℹ ｢wdm｣: Version: webpack 4.11.0
Time: 13914ms
Built at: 05.06.2018 16:37:12
Entrypoint main = main-c29587bba029864b102d.css index.js main.ef57d98abc586b5abd48.hot-update.js
ℹ ｢wdm｣: Compiled successfully.

There seems to be a CSS file being generated. Looks like an issue with the client side.

[ScriptedAlchemy]

Ahh yeah I get it. Using something like webpack merge. So the main thing to enable hot, is that there’s some kind of ref in the entry point. Let me get on my computer and I’ll send you examples. If I had a consoles logged version of your webpack it would help. But I’ll send you what I have locally. Alternatively I can just add hot:true to the plugin

…

Sent from my iPhone

On Jun 5, 2018, at 10:33 AM, Sebastian Werner ***@***.***> wrote: I mean the idea with HMR is that it should not reload, right? My Webpack config is somewhat generated. My issue is that with the old approach of using "style-loader" in development HMR works as expected while when using this plugin it just doesn't seem to correctly trigger the required changes. — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.

[ScriptedAlchemy]

Are you trying to hash the css files? can’t hash them in development mode

…

Sent from my iPhone

On Jun 5, 2018, at 10:38 AM, Sebastian Werner ***@***.***> wrote: Seems like Webpack itself is doing fine: 98% after emittingCompleted client bundle in 2.914s! ℹ ｢hot｣: webpack: Compiling Done ℹ ｢wdm｣: Version: webpack 4.11.0 Time: 13914ms Built at: 05.06.2018 16:37:12 Entrypoint main = main-c29587bba029864b102d.css index.js main.ef57d98abc586b5abd48.hot-update.js ℹ ｢wdm｣: Compiled successfully. There seems to be a CSS file being generated. Looks like an issue with the client side. — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.

[swernerx]

Yep, it's Webpack v4.11.0 right now. Everything using latest versions.

[ScriptedAlchemy]

It would be helpful to see the entry config and what you pass to entries

…

Sent from my iPhone

On Jun 5, 2018, at 10:39 AM, Sebastian Werner ***@***.***> wrote: Yep, it's Webpack v4.11.0 right now. Everything using latest versions. — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.

[swernerx]

I do hash them I figure.

[ScriptedAlchemy]

I’m on my phone at the moment. But class check the build and see if there’s any console warnings that were thrown

[swernerx]

Hashing was clearly an issue, conceptually, but does not fix the issue when disabled.

New output:

ℹ ｢hot｣: webpack: Bundle Invalidated
ℹ ｢wdm｣: Compiling...
Building client bundle...
ℹ ｢hot｣: webpack: Compiling...
 98% after emittingCompleted client bundle in 2.881s!
ℹ ｢hot｣: webpack: Compiling Done
ℹ ｢wdm｣: Version: webpack 4.11.0
Time: 13881ms
Built at: 05.06.2018 16:44:22
Entrypoint main = main.css index.js main.0a655b4a95cd904b6410.hot-update.js
ℹ ｢wdm｣: Compiled successfully.

[swernerx]

Content of the transferred files:

{"h":"59574152234a740a3f28","c":{"main":true}}

webpackHotUpdate("main",[])

This seems to be a little too light.

[swernerx]

BTW I am using the new dev-server "webpack-serve". So no SSR in place right now.

[swernerx]

There are no warnings. It's really just not working. Webpack output itself looks fine.

[ScriptedAlchemy]

Okay, I think know the issue. Do you have a repo that I can fix it on? I think for your immediate relief, im going to add hot:true to the plugin part

[swernerx]

Sorry, it's in a private repo of a customer of mine. Can't really share that.