Using multiple entry files does not work with HMR - hotUpdateGlobal

[MarioCadenas]

Bug report

What is the current behavior?

When the config has multiple entries, and these entries are loaded in the same page, HMR doesn't work properly and it throws an error like this

The first file changed will actually work, but the rest of files won't work.

If the current behavior is a bug, please provide the steps to reproduce.

I created this repository so its easy to reproduce. Plus a small patch with some changes that fix the behavior.

Even though, not directly related, I think this would also fix this problem module-federation/module-federation-examples#358

Some extra information, the usage of output.uniqueName doesn't work for this use case, as the build is the same, and both entry points will end up with the same problem

What is the expected behavior?

The expected behavior would be that if I have many entry points, and they are loaded in the same page, HMR should work for all of the files.

All of these said, as I also say in the README of the repository, I would like to open a PR to fix this problem, but I'm just asking for a little bit of guidance of how the modification to hotUpdateGlobal done in the patch could be done here instead. Maybe by using something like [name] or [id] in the config?

Thank you!

Other relevant information:
webpack version: 5.93.0
Node.js version: 20.5.1
Operating System: Mac OS
Additional tools: webpack hot middleware

[alexander-akait]

Expected, you have multile runtimes on the same page, but the one HMR updating function, your patch doesn't fix the problem really, just workaround for your case (and will break HMR for another cases, when you split your chunks), please use optimization: { runtimeChunk: 'single' }. When you have multiple chunks with own runtime on the same page, you always need to use runtimeChunk: 'single' for HMR.

Feel free to feedback

[MarioCadenas]

Hey @alexander-akait , in our case the problem is that optimization: { runtimeChunk: 'single' } doesn't fit the needs, so that's why I went for that approach. The idea is not that is mandatory or anything, is simply to have the ability to add something in case you have multiple runtimes in the same page (which can be very valid specifically in micro frontend architectures), and in that case having the ability to differentiate the runtimes.

For normal cases it would simply work as it has been working. The patch of course is just a workaround to validate that was the problem, but the idea is being able to maybe provide that way of differentiating the runtimes (even if they are in the same page), that's why I was proposing the usage of [name] or [id] as options that could be provided in output.hotUpdateGlobal or maybe allowing the usage of a function in output.hotUpdateGlobal that can receive the chunk.

Maybe it was wrong to open a bug because this might be more like asking for a feature instead?

Let me know what you think, thanks!

[alexander-akait]

Using chunks ids is a bad idea and wrong here, not each chunk has runtime, technical we can allow to setup hotUpdateGlobal: "webpackHotUpdate[unique-name][runtime]" and get the runtime value from https://webpack.js.org/concepts/entry-points/#entrydescription-object

[alexander-akait]

But there is a question about entries without runtime, which HMR functions they should be use...

[MarioCadenas]

I see, what can be done to maybe elaborate this a bit more? I would be happy to contribute, I simply lack a lot of the context and cases that need to be covered since webpack is quite a complex tool and covers many cases, but with a bit of guidance/requirements I would be happy to put together a proposal/poc or whatever you think is best, if you think we can try and move this forward of course 😄

Thank you!

[alexander-akait]

I can accept a PR to allow to use hotUpdateGlobal: (chunk) => { return "myOwnName" + chunk.id }

[MarioCadenas]

ready #18672