webpack-dev-server enables features, then disconnects twice when using "host" option in Webpack config

Question

After updating webpack-dev-server to 4.4.0 from 3.11.0, when I use the "host" option under devServer in my Webpack config file, hot reload is no longer working. My console shows WDS connecting twice and subsequently disconnecting:

[HMR] Waiting for update signal from WDS...
[webpack-dev-server] Hot Module Replacement enabled.
[webpack-dev-server] Live Reloading enabled. 
[webpack-dev-server] Disconnected!
[webpack-dev-server] Trying to reconnect... 
[webpack-dev-server] Hot Module Replacement enabled.
[webpack-dev-server] Live Reloading enabled.
[webpack-dev-server] Disconnected!

When I remove the "host" option and revert back to "localhost," hot reload works consistently.

The devServer section of my webpack config file:

devServer: {
  port: 3000,
  host: 'app.ddev.site',
  allowedHosts: 'auto',
  open: true,
  hot: true,
  proxy: {
    '/xhr': 'http://localhost:7777',
  },
},

Webpack package versions:

"webpack": "^5.61.0",
"webpack-bundle-analyzer": "^4.5.0",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.4.0"

Scripts relating to "npm run dev":

"client": "cross-env NODE_ENV=development webpack serve --config=config/webpack.dev.js",
"dev": "concurrently \"npm run start-local\" \"npm run client\"",
"start-local": "nodemon src/server/start.js",

Any help is appreciated! Thanks in advance.

Answer 1

I think your allowedHosts setting is likely to blame.

According to the docs, you might have success with:

allowedHosts: ['all']