Webpack-dev-server: Hot Module Replacement not working when `target` is set to `['web', 'es5']`

[pallymore]

• Operating System: macOS 11 / Windows 10
• Node Version: v12.18.4
• NPM Version: 6.14.0
• webpack Version: 5.13.0
• webpack-dev-server Version: 3.11.0

• Browser: Chrome / IE11

• [x] This is a bug

• [ ] This is a modification request

Code

// webpack.config.js
{
  mode: 'development',
  entry: './src/js/index.jsx',
  target: ['web', 'es5']
  // ... pretty basic stuff
  devServer: {
    hot: true,
    compress: true,
    overlay: true,
  }
}

Expected Behavior

Page should reload when files are changed.
HMR should connect via websocket

Actual Behavior

Not reloading. No message in the console either.
It seems websocket is not connected? I checked the Network - WS panel in Chrome devtools.

For Bugs; How can we reproduce the behavior?

When I use target: ['web', 'es5'], HMR doesn't seem to work. When I open the page I can see a [HMR] Waiting for update signal from WDS... message but there is no second "[WDS] ..." (HMR enabled confirmation message). When I check the Networks tab in devtools, there are no WS connections.

Curiously, when I change target: 'web' in the same config file - HMR works fine.

[alexander-akait]

Yes, it is fixed in [email protected]

[pallymore]

thanks @alexander-akait
I tried it yesterday but it wasn't working either. Maybe I missed something, but I can try it again today 🤔

Is there a (draft) migration guide? I have a couple of devServer configs that are no longer supported in v4.

[alexander-akait]

I have a couple of devServer configs that are no longer supported in v4.

What do you mean? How you run webpack-dev-server in this case?

[pallymore]

I have a couple of devServer configs that are no longer supported in v4.

What do you mean? How you run webpack-dev-server in this case?

Eh, I just looked at the errors and took some guesses. BTW I'm running the server with the JS API not CLI.

e.g. I'm getting _webpackDevServer.default.addDevServerEntrypoints is not a function and various errors like configuration has an unknown property 'stats' - I removed some non-essential ones (e.g. clientLogLevel) and tweaked the rest to get it to run - maybe that's where I messed things up?

[alexander-akait]

_webpackDevServer.default.addDevServerEntrypoints is not a function because default doesn't exists, we don't use import or export

configuration has an unknown property 'stats'

Please read changelog many options were removed and it was described

[pallymore]

_webpackDevServer.default.addDevServerEntrypoints is not a function because default doesn't exists, we don't use import or export

configuration has an unknown property 'stats'

Please read changelog many options were removed and it was described

Thanks - somehow I missed it earlier. 😅

I fixed the config and HMR is working as intended. Thanks for your help!