Webpack-hot-middleware: HMR stopped work after webpack upgrade from 3 to 4

Created on 24 Mar 2018  路  6Comments  路  Source: webpack-contrib/webpack-hot-middleware

HMR was broken for me after webpack upgrade from 3 to 4. Here small repo with reproduction of behaviour (I'v got [HMR] Nothing hot updated. message) https://github.com/Yizhachok/project-hmr

Here I have webpack configuration:
https://github.com/Yizhachok/project-hmr/tree/master/dev/client/webpack
Here I subscribe to HMR events:
https://github.com/Yizhachok/project-hmr/blob/master/client/environments/environment.hmr.ts#L36
console.log('Here'); never fired

Most helpful comment

Also getting same error. Using with Express and webpack-dev-middleware. Here is the error I am receiving in the browser:

Uncaught ReferenceError: require is not defined
    at Object.webpack-hot-middleware/client (client":1)
    at __webpack_require__ (bootstrap:673)
    at fn (bootstrap:53)
    at Object.0 (client.js:802)
    at __webpack_require__ (bootstrap:673)
    at ./src/css/style.css (bootstrap:728)
    at bootstrap:728

Looks like something similar is occurring with Webpack Node Externals:
https://github.com/liady/webpack-node-externals/issues/17

Here is a link to my code:
https://github.com/bengrunfeld/app-engine-test-apps/blob/master/vanillajs-app/webpack.dev.config.js

Code is in webpack.dev.config.js

All 6 comments

Same here. I'm not able to make it work :(

Also getting same error. Using with Express and webpack-dev-middleware. Here is the error I am receiving in the browser:

Uncaught ReferenceError: require is not defined
    at Object.webpack-hot-middleware/client (client":1)
    at __webpack_require__ (bootstrap:673)
    at fn (bootstrap:53)
    at Object.0 (client.js:802)
    at __webpack_require__ (bootstrap:673)
    at ./src/css/style.css (bootstrap:728)
    at bootstrap:728

Looks like something similar is occurring with Webpack Node Externals:
https://github.com/liady/webpack-node-externals/issues/17

Here is a link to my code:
https://github.com/bengrunfeld/app-engine-test-apps/blob/master/vanillajs-app/webpack.dev.config.js

Code is in webpack.dev.config.js

whats the solution ??

if I inject "webpack-hot-middleware/client" to each entry, I got
ReferenceError: installedChunks is not defined
but if I inject a js file (hot-client.js):

var hotClient = require('webpack-hot-middleware/client' + __resourceQuery)
hotClient.subscribe(function (event) {
  if (event.action === 'reload') {
    window.location.reload()
  }
})

There was not error and page reloaded, but HMR does not work.

Was this ever solved?

Just wanted to mention that I got an error related to the "__resourceQuery" being empty for webpack-dev-server, and eventually realized it was due to an update in webpack-dev-server that makes it automatically require the "webpack-dev-server" module when you call new WebpackDevServer().

I don't have time to go into it all, but here is the commit where I solved my issue: https://github.com/Venryx/mobx-devtools-advanced/commit/d1fdb0dd37de9e5ffc5f720d920d45552f6a5803#diff-2c81437e455a833c25e31879ed05c465

A (brief) explanation of the change seems to be here: https://github.com/webpack/webpack-dev-server/issues/1802#issuecomment-484049451

Was this page helpful?
0 / 5 - 0 ratings

Related issues

lili21 picture lili21  路  6Comments

Javison666 picture Javison666  路  7Comments

moshie picture moshie  路  3Comments

mkg0 picture mkg0  路  11Comments

erikakers picture erikakers  路  11Comments