Webpack-hot-middleware: not work on webpack5

[wangmeng1991]

• Operating System: macOS 10.15.7
• Node Version: v14.14.0
• NPM Version: 6.14.8
• webpack Version: 5.1.3
• ${package} Version: 2.25.0

Expected Behavior

overlay on display

Actual Behavior

chrome console:

process-update.js:147 [HMR] Update check failed: ChunkLoadError: Loading hot update chunk app failed.
(missing: http://localhost:9001/app.6a5a046ba0eb85dfc42f.hot-update.js)
    at http://localhost:9001/app.js:191510:26
    at new Promise (<anonymous>)
    at loadUpdateChunk (http://localhost:9001/app.js:191505:20)
    at http://localhost:9001/app.js:191934:29
    at Array.forEach (<anonymous>)
    at Object.__webpack_require__.hmrC.jsonp (http://localhost:9001/app.js:191929:22)
    at http://localhost:9001/app.js:191318:45
    at Array.reduce (<anonymous>)
    at http://localhost:9001/app.js:191314:53

terminal:

Code

  // webpack.config.js

Object.keys(baseWebpackConfig.entry).forEach(function (name) {
  baseWebpackConfig.entry[name] = [
    "webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000&reload=true",
  ].concat(baseWebpackConfig.entry[name]);
});

// dev-server.js

var hotMiddleware = require('webpack-hot-middleware')(compiler, {
  overlay: true
})

How Do We Reproduce?

upgrade to webpack5

[waldronmatt]

I'm getting the same error:

The last error seems similar to https://github.com/webpack/webpack/issues/10790

[pwhipp]

Same issue with webpack 5.9.0. If I kill the webpack server, the error disappears on restarting it. It reappears when I subsequently modify the file reported in the error.

The changes display correctly in spite of the error.

[Fedward]

@wangmeng1991
Having a similar problem - using optimization.runtimeChunk works for me.

[pixelhuh]

Same issue with webpack 5.9.17
On version 4.46.0 HMR works fine.

[Fedward]

Same issue with webpack 5.9.17
On version 4.46.0 HMR works fine.

Also you can try target - web, in newly versions.

[xiki808]

Having the same issue.

webpack 5.37.0
webpack-dev-middleware 4.2.0
webpack-hot-middleware 2.25.0
browser-sync 2.26.14
mini-css-extract-plugin 1.6.0

Using webpack dev and hot middleware through a browserSync instance.

I get the below error on a JS or SASS change, and no patching happens:

On any try to patch JS or SASS:

Same result when replacing mini-css-extract-plugin with style-loader.

For JS, it works on the second change. The error only shows for the first update.

[glenjamin]

Closing in favour of #390