Module federation: the usage of "dynamic remotes" will cause blank screen when working with `runtimeChunk`

[RexSkz]

Bug report

What is the current behavior?

If I set optimization.runtimeChunk and use dynamic remotes, the app will show a blank screen with no error.

const remotes = {
  app1: `promise new Promise(resolve => {
    // ...
    resolve({
      get: (request) => window.app1.get(request),
      init: (arg) => {
        try { return window.app1.init(arg) } catch { }
      }
    })
    // ...
  }
}

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

1. Clone the repo: https://github.com/RexSkz/mf-dynamic-remotes-circular-reference
2. Run pnpm i && pnpm start (it's a monorepo which uses pnpm workspace feature)
3. Open http://localhost:3000 in your browser

There is more information (also with my investigation) in this repo.

What is the expected behavior?

You will get a console trace (with the number 42) immediately after the page is loaded.

Either removeing optimization.runtimeChunk or using hard-coded remotes instead of dynamic remotes will solve the issue. But to fully solve it, we should pass ...args instead of arg in init.

I'm not sure whether it's a documentation issue or some sort of design, please correct me if anything wrong :)

Other relevant information: webpack version: 5.91.0 Node.js version: 18.19.0 Operating System: Windows 11 Additional tools: none

[alexander-akait]

Either removeing optimization.runtimeChunk or using hard-coded remotes instead of dynamic remotes will solve the issue. But to fully solve it, we should pass ...args instead of arg in init.

What do you mean?

[RexSkz]

In the chapter Promise Based Dynamic Remotes:

But init actually has more than one parameter. If we don't pass all the parameters, the whole app will show a white screen. (You can follow the "steps to reproduce" to see.)

I solved this issue by changing the code like this:

- init: (arg) => {
+ init: (...args) => {
    try {
-     return window.app1.init(arg)
+     return window.app1.init(...args)
    } catch(e) {
      console.log('remote container already initialized')
    }
  }