Reflect changes as they are saved using webpack-hot-middleware with node

Question

I am trying to get 'webpack-hot-middleware' to work with a node server. I created a sample application using typescript with an endpoint localhost:3000/ that console logs 'Hello endpoint'. When I change this text, and visit the endpoint again, I want the console log to be reflecting the update.

I followed the documentation of webpack-hot-middleware (https://github.com/webpack-contrib/webpack-hot-middleware#installation--usage) to:

• add a plugin new webpack.HotModuleReplacementPlugin().
• create an entry in the webpack.config.js entries: webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000&reload=true
• Additionally setting up the server.ts file with an express app using webpack-dev-middleware and webpack-hot-middleware.

Currently I am stuck. I am able to build the application, but when running node it fails with the following exception:

user@deskmini:~/src/webpack-node-hmr$ npm run dev

> [email protected] dev
> node dist/server/server.js

/home/user/src/webpack-node-hmr/dist/server/server.js:270
/******/                        throw e;
                                ^

Error: Cannot find module 'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000&reload=true'
Require stack:
- /home/user/src/webpack-node-hmr/dist/server/server.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:956:15)
    at Function.Module._load (node:internal/modules/cjs/loader:804:27)
    at Module.require (node:internal/modules/cjs/loader:1028:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000&reload=true (/home/user/src/webpack-node-hmr/dist/server/server.js:216:18)
    at __webpack_require__ (/home/user/src/webpack-node-hmr/dist/server/server.js:267:33)
    at /home/user/src/webpack-node-hmr/dist/server/server.js:1192:11
    at Object.<anonymous> (/home/user/src/webpack-node-hmr/dist/server/server.js:1195:12)
    at Module._compile (node:internal/modules/cjs/loader:1126:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1180:10) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [ '/home/user/src/webpack-node-hmr/dist/server/server.js' ]
}

It seems it cannot process the query parameters.

• If I remove those query parameters, the script webpack-hot-middleware/client.js is found and it runs, but it complains about __resourceQuery being undefined. Even if this would work, I would still want to pass parameters.
• If I completely remove the entry, the webpack-dev-server is running and it compiles changes, but I don't see them being reflected in the output when I visit the endpoint again.
• Following the instructions from another stack overflow post gave me the same error (see: webpack-hot-middleware not working with webpack-dev-middleware)

Does anybody have an idea what I can do to make hot reload work, so that my changes are directly compiled in the built server.js file?

My github repository can be found here: https://github.com/jlemein/webpack-node-hmr/tree/stackoverflow-hmr-question