Webpack-hot-middleware: Can't get it to work when using multiple instances with different compilers

[AmrN]

Here's a minimal repo to test the problem: https://github.com/AmrN/multi-react-app-hmr

I have a basic setup with two apps each in a separate directory, I'm using a custom server to compile them. Things are working fine except that I can't get HMR to work for the second app.

When I run the server, my files are compiled correctly, and I can visit http://localhost:3000/app1/index.html successfully, and HMR is working properly here. However, if I visit the second app http://localhost:3000/app2/index.html it opens but HMR is not working and looking at the console it gives me the following error:

GET http://localhost:3000/app2/640a44b6b47b67436af2.hot-update.json 404 (Not Found)
[HMR] Cannot find update (Full reload needed)
[HMR] (Probably because of restarting the server)

Changing the order in which I apply my apps webpack configs in server.js from:
[config1, config2].forEach((config) => {...})
to:
[config2, config1].forEach((config) => {...})
switches the problem to app1, now HMR works for app2 but not app1.

This issue is really frustrating me and I don't know where to look, any help is appreciated.
Thanks.

[glenjamin]

I think your problem is here https://github.com/AmrN/multi-react-app-hmr/blob/master/server.js#L11-L13

The middleware gets added twice in the same location, with a different publicPath.

This means that only the one registered first will ever receive requests.

I suspect you'll need to do app.use('/' + appName, ... to ensure that incoming requests only go to the relevant middleware instance.

[AmrN]

Hey @glenjamin, thank you so much for the quick reply which pointed me in the right direction.
I believe the problem was that both apps used the same path for hot reloading (I think it's /__webpack_hmr by default).
So I had to use a different one for each:

in webpack.config.js I did:

entry: [
  // ...
  'webpack-hot-middleware/client?path=/__webpack_hmr_'+appName,
  // ...
]

and in server.js:

app.use(require('webpack-hot-middleware')(compiler, {
  path: '/__webpack_hmr_'+appName
}));

Now it's working properly.