Hot Updates not being handled by server

[robinelvin]

• Operating System: MacOS
• Node Version: 16.13.0
• NPM Version: 8.1.0
• webpack Version: 5.68.0

Expected Behavior

HMR updates are returned by the server.

Actual Behavior

When code is updated and the HMR client tries to load it the request is ignored by middleware and drops through to the custom Express 404 handler.

I have tried all the suggestions for similar bugs including trying single/multicompiler configs, publicPath setting with/without beginning and/or trailing slashes, with/without a path setting etc.

I see HMR has connected in the browser console and when the code is changed webpack compiles the code and shows an update e.g.

<i> [webpack-dev-middleware] wait until bundle finished: /ui.0b44756b2ddee6b0d337.hot-update.json
webpack built ui 4107bb0ef21cf60d2542 in 455ms
Compilation done 4
assets by status 16.6 MiB [cached] 5 assets
assets by path . 497 bytes
  asset ui-manifest.json 413 bytes [emitted]
  asset COMMITHASH 40 bytes [emitted]
  asset LASTCOMMITDATETIME 25 bytes [emitted]
  asset VERSION 19 bytes [emitted]
cached modules 5.94 MiB (javascript) 604 KiB (asset) 31.5 KiB (runtime) [cached] 1681 modules
./source/presentation/ui-components/account/profile/UserProcessList.tsx 7.92 KiB [built]
ui (webpack 5.68.0) compiled successfully in 455 ms

However the json file shown is not served by the middleware and the request drops through to the Express route for the application which then returns a 404.

[HMR] bundle rebuilding [client.js:241](webpack://itrax-auth//Users/rob/Projects/core-develop/node_modules/webpack-hot-middleware/client.js?7457)
[HMR] bundle 'ui' rebuilt in 1595ms [client.js:250](webpack://itrax-auth//Users/rob/Projects/core-develop/node_modules/webpack-hot-middleware/client.js?7457)
[HMR] Checking for updates on the server... [process-update.js:51](webpack://itrax-auth/node_modules/webpack-hot-middleware/process-update.js?881f)
XHRGEThttp://docker.elixirsoftware.co.uk:3000/ui.0b44756b2ddee6b0d337.hot-update.json
[[HTTP/1.1 404 Not Found 640ms]]()

[HMR] bundle rebuilding [client.js:241](webpack://itrax-auth//Users/rob/Projects/core-develop/node_modules/webpack-hot-middleware/client.js?7457)
[HMR] bundle 'ui' rebuilt in 455ms [client.js:250](webpack://itrax-auth//Users/rob/Projects/core-develop/node_modules/webpack-hot-middleware/client.js?7457)

Code

ui.webpack.config.js

https://gist.github.com/robinelvin/29be50ff97004a9562bcd8d947e323e8

app.ts

https://gist.github.com/robinelvin/e47d79d4fbf1aaf67bd19bba4260d455

How Do We Reproduce?

Create and build an Express app which uses webpack-dev-middleware and webpack-hot-middleware
Create a second project containing React components.
In the Express app require() the second webpack config for building the React components.
Start the Express project which will perform webpack compilation of the second project.
Navigate to the project page and verify [HMR] connected is shown in the console.
Change and save one of the components.

[uc2pac]

@robinelvin , did you find the solution?
I have the same problem.

[robinelvin]

@uc2pac No, couldn't get it working no matter what I tried. In the end I gave up on webpack and changed to running Express under nodemon with the client bundle built with ViteJS in a separate terminal. I have removed SSR for now so haven't got that working with this setup yet.