Host MFE is showing others duplicated MFEs in Client Side

[MaykonMorais]

Describe the bug

In our production project, we are experiencing some very strange errors related to the extra loading of MFEs by the MFE Host. To provide context, we basically have our MFE Composer that communicates with MFE Mid, which in turn communicates with the other MFEs (header, content, footer). We have noticed that at certain moments the MFE Content and MFE Footer are appearing duplicated, and this behavior occurs on the client side but the project configured to use server side.

repro.video.mov

We have another project that follows the same architecture and this errors also appears and some MFEs sometimes they are rendered client side, sometimes server side.

Repos:

• Composer: https://github.com/MaykonMorais/composer
• Mid MFE: https://github.com/MaykonMorais/mid-mfes
• MFE Header: https://github.com/MaykonMorais/mfe-header
• MFE Content: https://github.com/MaykonMorais/mfe-content
• MFE Footer: https://github.com/MaykonMorais/default-mfe

Reproduction

https://composer-psi.vercel.app

Used Package Manager

yarn

System Info

System:
    OS: macOS 14.6.1
    CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
    Memory: 173.57 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v20.11.1/bin/yarn
    npm: 10.2.4 - ~/.nvm/versions/node/v20.11.1/bin/npm
  Browsers:
    Chrome: 128.0.6613.119
    Edge: 128.0.2739.63
    Safari: 17.6

Validations

• Read the docs.
• Read the common issues list.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Module federation issue and not a framework-specific issue.
• The provided reproduction is a minimal reproducible example of the bug.

[ScriptedAlchemy]

It means multiple version of react are loading. Ensure pages have a get initial props and see if that makes it any better. Ensure that all remotes use import from only and not loadRemote.

Try not using ISR or any other data loading, just put get initial props on every single page in every application and see what happens then.

I'd also suggest using modernjs which is designed for these use cases. Next is barely functional.

[MaykonMorais]

Hi @ScriptedAlchemy , thanks for the quick response!

How can I avoid multiples version of react? Using shared property? Could you show me an example?

[ScriptedAlchemy]

Try copying one of my examples and making minimal changes to it. Or ass getInitialProps to all your pages everywhere. Since some do not have that

[MaykonMorais]

Hi @ScriptedAlchemy
We notice that some MFEs are returning this error message on the server side:

content/content offline TypeError: n.init is not a function at e7.get (remoteEntry.js:16:577) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async tx.loadRemote (remoteEntry.js:44:1547)

When this error happen the MFE is only rendered on the client side. Have you experience this error before? What could be causing this?

[ScriptedAlchemy]

Yeah if it's a non ssr remote then you need to prevent hydration errors

[MaykonMorais]

Got it! We solved the previous error and it was related to how we loaded emotion library. Now we see another error in our logs

footer/Footer Script execution error: TypeError [ERR_VM_DYNAMIC_IMPORT_CALLBACK_MISSING]: A dynamic import callback was not specified.

Is there something related about ESM Modules in Next.js? How can we solve this?