WDS not Refreshing or Hot Module Replacement firing WDS initialised through grunt-webpack

[oller]

Hello all,

I'm having trouble getting styles HMR to work since migrating from webpack 1 to webpack 2. I'm using grunt-webpack to initialise the dev server with the following options:

start: {
 hotOnly: true,
 inline: true,
 historyApiFallback: true
}

If I set hot: true instead of hotOnly: true, I'll get the following error: Uncaught Error: [HMR] Hot Module Replacement is disabled. Which used to work with webpack/dev-server 1. Which seems like unexpected behaviour. However, if I change hot: true to hotOnly: true as above, that resolves that issue. I'll then get the console message [WDS] Hot Module Replacement enabled.

As I've read elsewhere, I'm not initialising the webpack.HotModuleReplacementPlugin() in the plugins array, so there's no conflict there.

When I make a change to a .less file for my styles, loaded as below:

    module: {
        rules: [
            {
                test: /\.less$/,
                use: [{
                    loader: "style-loader"
                }, {
                    loader: "css-loader",
                    options: {
                        sourceMap: true
                    }
                }, {
                    loader: "less-loader",
                    options: {
                        strictMath: true,
                        sourceMap: true
                    }
                }]
            }

Webpack will watch that change and trigger a rebuild, I can see this event is exposed by WDS to the browser:

The same behaviour occurs with a JS change too run through babel, the same console.log messages - but no HMR or even a page refresh triggered in the instance of a JS change (this app is not react)

[WDS] App updated. Recompiling...
[WDS] App updated. Recompiling...  //  this appears twice.
[WDS] App hot update...

I can see the WS frame triggering this:

a["{\"type\":\"hash\",\"data\":\"2358f2691ab3a5d2e03d\"}"]

However nothing changes, the styles don't propagate through - nothing seems to change.

I'm not using the ExtractTextPlugin and I can see the compiled styles are being loaded as blobs, so not via style tags when I had inline styles hot updating in webpack 1.

As an aside, if i disable the grunt-webpack hotOnly and inline options and try using the plugin to initialise HMR, that'll trigger full page refresh for a style change, which does work, but with webpack 1 the HMR for styles, was so handy - not sure how I've managed to lose it in the migration.

I realise this issue spans a couple of libs, so apologies if you feel it should be raised elsewhere, let me know!

Thanks in advance

Versions

"webpack": "^2.4.1",
"webpack-dev-server": "^2.4.5"

[oller]

On further investigation, this looks like a duplicate of : #364

Shall try those recommendations and shall close if appropriate

[shellscape]

Closing due to age and inactivity. Looks like #364 is a winner.