webpack-dev-server: Webpack module federation breaks with multiple entrypoints

@raix Here fix https://github.com/webpack/webpack-dev-server/pull/2920, can you try locally? I need rewrite some tests, if it will work I will focus on it and will do release, I already work on webpack-dev-server (focused on webpack-cli and webpack-dev-server, want to finish all problem to move ahead)

Fully work on the next releases (included stable release) will be started on the next week

Sorry to be that guy, but… any updates?

@mawi12345

Alright, I got some findings.

The reason is the HtmlWebpackPlugin takes the main chunk and the remoteEntry.js chunk. If I open the app directly as a host app, remoteEntry is not needed.

So I configured HtmlWebpackPlugin to only include the main chunk, and this solved the problem:

      chunks: ["main"],

Now webpack hot works.

@alexander-akait are there any updates around this issue? We would love to start using Module Federation and this fix of yours would be very useful. Are you still in need of testing for #2920 locally?

This time I’ll be that guy… do we have any updates on this?

Have one question regarding Hot Module Replacement. Seems it doesn’t work properly. I used CRA with react-scripts v 5.0.0 and CRACO to override the webpack config in order to set up my module federation and that’s everything is fine (build, test, start commands)… Thought when it comes to the local development I need manually hard reload pages to reflect changes, and it’s really inconvenient.

I’m thinking to build React app from a scratch and playing around with webpack config but that is not what I wanted to do as we already have a pretty well config provided by CRA only need to override it for Module Federation config is that correct?

Does somebody know whether CRA (latest version 5) is able to work with hot module reload? What configuration do I miss? Thank you!

The bug is here:

https://github.com/webpack/webpack-dev-server/blob/4ab1f21bc85cc1695255c739160ad00dc14375f1/lib/utils/addEntries.js#L86-L92

Desprite the function name prepend it actually appends…

Change it to:

      /** @type {Entry} */
      const entriesClone = [].concat(originalEntry);
      additionalEntries.forEach((newEntry) => {
        if (!entriesClone.includes(newEntry)) {
          entriesClone.push(newEntry);
        }
      });

Could somebody send a PR for that? As test case you can use output.library = "TEST" and check if this created the correct global.

20 October 2023 👀

I’m coming out with a life reload plugin that kinda attempts to solve the problem. Not hot reloading but it’ll refresh the change when making them to other containers

Thanks, I will look at this in near future, the next beta will be on this week, so I try to resolve it

@alexander-akait are there anything we can help out with eg. code/test/debug etc. not sure how much is missing/done?

(Despite visiting issues/pr’s opened/closed and trying to follow things merged to master etc. I still don’t have an overview on how to help out here)

Thanks everyone for chiming in.

What confuses me a little about this is that webpack-dev-server, which i always thought of as a “major part of webpack”, actually seems to be an afterthought when it comes to new developments.

I don’t understand a lot of the details everyone wrote in this issue, but i’m glad this problem is being ironed out and fixed.

Since this issue is still open, I’ll link to my (pretty damn hacky) “solution” for HMR I posted in another thread: https://github.com/webpack/webpack/issues/11240#issuecomment-1505935214

It’s very far from perfect, but it does the job in a pinch

Fetch(jsUrl).then(text).then(md5hashFronString)

Store it on some object and put the fetch in a setInterval.

also has more reason, because webpack it has support multi compilers, i think dev-server should support we pass multi compilers with hot

Sorry, it is impossible by design, you can’t have the same HMR code for multi compilers, it is invalid and weird, before you don’t have bug due our invalid logic for initial, in fact you should have gotten this problem much earlier, we support multi compiler mode, but your case has multiple independent builds with the same HMR, even more new features like lazyCompilation, buildless mode (future) will not work too

wait me moment, it seem that i can’t commit github now, authentication failed. https://github.com/tianyingchun/webpack-dev-server-demo-2692

ok, i try to create an demo repo now. 😃

@alexander-akait not yet unfortunately, noticed it in one of our own projects when running dev-server with a Module Federation project. I could try setting a small repro up.

I wonder where this comes from though, I suppose it is added by Webpack:

var deferredModules = [

      ["./node_modules/webpack-dev-server/client/default/index.js?http://0.0.0.0", "vendors-node_modules_webpack-dev-server_client_default_index_js_http_0_0_0_0-node_modules_web-394369"],

      ["webpack/container/entry/supportwidget", "vendors-node_modules_webpack-dev-server_client_default_index_js_http_0_0_0_0-node_modules_web-394369"]
    ];

I will send a PR.

Feel free to send a fix