Module not found: Error: Can't resolve 'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000&reload=true' when using webpack-hot-middleware

Question

I am using webpack-hot-middleware for hot module replacement for javascript ui scripts in an express app. Whenever I start the server, I get this error: Module not found: Error: Can't resolve 'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000&reload=true'.

Here is my webpack config, which I compile in the webserver:

const path = require('path');

module.exports = {
  mode: 'development',
  devtool: 'source-map',
  entry: [ path.join(__dirname, 'ui/lib/utilities/index.js') , 'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000&reload=true' ],
  output: {
    path: path.join(__dirname, 'ui/dist'),
    filename: '[name].js',
    publicPath: 'http://localhost:3000'
  },
  resolve: {
    extensions: [
      '.js',
    ],
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/, // exclude any and all files in the node_modules folder
        include: path.resolve(__dirname, 'scripts'),
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['env', 'es2015'],
              plugins: [
                // OccurrenceOrderPlugin is needed for webpack 1.x only
                new webpack.optimize.OccurrenceOrderPlugin(),
                new webpack.HotModuleReplacementPlugin(),
                // Use NoErrorsPlugin for webpack 1.x
                new webpack.NoEmitOnErrorsPlugin()
              ],
              camelcase: true,
              emitErrors: false,
              failOnHint: false,
            },
          },
          { loader: 'style-loader' },
          { loader: 'css-loader' },
        ],
      },
    ],
  },
};

And here's the compilation in the server code:

  web.use(webpackDevMiddleware(compiler, {
    noInfo: true,
    publicPath: webpackConfig.output.publicPath,
    writeToDisk: true,
    hot: true
  }));
  web.use(require("webpack-hot-middleware")(compiler, {
    log: console.log, path: '/__webpack_hmr', heartbeat: 10 * 1000
  }));