Unable to get webpack-hot-client to reload on file change

Question

For some reason, I'm unable to get webpack-hot-loader working. This is how I'm using it:

const bodyParser = require('body-parser')
const cors = require('cors')
const express = require('express')
const webpack = require('webpack')
const webpackDevMiddleware = require('webpack-dev-middleware')
const webpackHotClient = require('webpack-hot-client')

const config = require('config')
const errorOnHtml = require('scripts/utils/httpServer/errorOnHtml')
const paths = require('scripts/utils/paths')
const runEntrypoint = require('scripts/utils/runEntrypoint')
const trackRequest = require('scripts/utils/httpServer/azureAppInsights')
const webpackDevMiddlewareConfig = require('config/webpackMiddleware/dev')
const { webpackDevelopClientConfig } = require('config/webpack')

const webpackCompiler = webpack(webpackDevelopClientConfig)

webpackHotClient(webpackCompiler)

const httpServerConfig = express()

httpServerConfig
.use(
  webpackDevMiddleware(
    webpackCompiler,
    {
      publicPath: (
        webpackDevelopClientConfig
        .publicPath
      ),
    }
  )
)

.all('*', runEntrypoint('app.server'))

module.exports = () => httpServerConfig

Another function actually runs the Express server in a different file.

I'm seeing Webpack Hot Client enabled and running, but changing files doesn't result in any updates occurring. I notice Webpack rebuilding, but Webpack Hot Client does nothing.

Answer 1

It appears I needed to set a custom port.

Not shown here is another WebSocket server attached to this Express instance. It appears webpack-hot-client doesn't function properly without specifying a custom port.