Always get "Chunks loaded by HMR are unprotected" warning about webpack-subresource-integrity

[jscheid]

Hi there,

What the warning message is trying to tell you is that this plugin is of little use in development mode and you should therefore disable it in that mode.

One way to do so is by passing this option: enabled: process.env.NODE_ENV === 'production'. See also the usage example in the README.

Doing this should make the warning go away.

Obviously, the warning message doesn't make this clear enough so I'm planning to improve on it.

If you already have disabled this plugin in development mode, and you're still seeing the warning, I'd like to understand why. webpack-dev-server is not usually a package used in production so you'd have to explain a bit more about your setup, perhaps post your webpack configuration so that we can have a look at it together.

[ksmolyanin]

@jscheid, thank you for quick response! The problem is that I use webpack-dev-server with process.env.NODE_ENV === 'production' and HMR in such a case is disabled. It is not used for real prod actually. The reason for that strange thing is that my development and production builds are slightly different (for example, minification of JS-code is enabled only for production). So I run dev server locally to check the production build. And I get the mentioned message for that pseudo-production environment.

[jscheid]

The problem is that I use webpack-dev-server with process.env.NODE_ENV === 'production' and HMR in such a case is disabled.

Could you elaborate on this point, how do you disable HMR or how do you know that it is disabled?

[ksmolyanin]

how do you disable HMR

Actually I don't enable it for the mentioned build.

how do you know that it is disabled

If HMR is enabled webpack logs this into console on first load: "[WDS] Hot Module Replacement enabled". If it is not enabled it doesn't write something like this.

And if I need to enable it I use --hot key when call webpack 2 from command line (this works nice, I've checked): webpack-dev-server --hot. If I don't want HMR I just not use that key.

[jscheid]

Ok, I've had a closer look at this and I believe the problem is that the warning is confusingly worded.

Firstly, it should talk about "hot reloading" instead of "HMR", because even without hot module reloading enabled, webpack-dev-server will still do hot reloading (watch the filesystem and reload the page when it changed.)

Secondly, instead of saying "resources will be unprotected" it should say "may interfere with hot reloading". For example, try this in inline mode without hot enabled: https://github.com/jscheid/wsi-import-46 (i.e. go to http://localhost:8080/ instead of http://localhost:8080/webpack-dev-server/) and make a change to index.js. The change won't be reloaded by the browser, instead an error is thrown because the integrity hash doesn't match anymore.

To summarize, webpack-subresource-integrity interferes with hot reloading, not just hot module reloading, and as such is incompatible with webpack-dev-server regardless of the hot flag setting.

In your specific case I'm not sure what the best solution is. Are you actually using webpack-dev-server's hot reloading in this case? Would lazy mode work perhaps? https://webpack.github.io/docs/webpack-dev-middleware.html#lazy

[ksmolyanin]

You are right. I think you should change that message to be more informative. Now I see that webpack hot reload doesn't work with subresource integrity and it is correct behavior. BTW in my case I don't change code when run prod build on dev server.