@module-federation/nextjs-mf loads unused remotes

[duannx]

Describe the bug

I'm using @module-federation/nextjs-mf@8.3.10. The plugin always loads the remoteEntry of all MFEs even though there is no usage of them.

Is there any way to get rid of that behavior? My goal is if there is no usage of a MFE, we should not load it at all.

The issue does not happen with @module-federation/nextjs-mf@8.2.6

Reproduction

https://github.com/duannx/mf-unused-remotes-issue

Used Package Manager

yarn

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (16) x64 Intel(R) Core(TM) i7-10700 CPU @ 2.90GHz
    Memory: 14.44 GB / 31.72 GB
  Binaries:
    Node: 18.19.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.10.2 - ~\AppData\Local\pnpm\pnpm.EXE
  Browsers:
    Edge: Chromium (123.0.2420.97)
    Internet Explorer: 11.0.22621.1

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.

[zhoushaw]

@2heal1 This problem is caused by the need to pre-load all modules to determine shared. Is there any way for the user to control whether all modules are loaded?

[ScriptedAlchemy]

If the remote is not imported at all it. Bundler should tree shake it as it's not used. If there is any use of the remote though - it needs to be loaded eagerly.

[duannx]

Hi @ScriptedAlchemy, Is there any way to let the user define which remote should be loaded eagerly? Btw, this problem is not happen on @module-federation/nextjs-mf@8.2.6

[ScriptedAlchemy]

Not currently, this is upstream impact caused by federation/enhanced.
We need to fix it there in the runtime code

[ScriptedAlchemy]

@2heal1 whereever we get the remote data we should replace that logic with how webpack does it.
getBySourceType() and collect only included remote modules from the compilation chunks not the static options user provides.

[vunguyen10111995]

I have got the same issue in my project. That might cause the redundant remoteEntry.js files, and my network must have to load those files. My project now is using many different pages.
Do you have any plans to fix this in the next version?

[duannx]

Hi @ScriptedAlchemy and @2heal1, is there any update on this?

[2heal1]

seems like preload issue , i will take a look

[2heal1]

I locate the reason , current nextjs mf use 'version-first' as shared strategy by default , and it will load remoteEntry when load shared to sync shared infos .

@ScriptedAlchemy How about using 'loaded-first' shared strategy by default ?

[ScriptedAlchemy]

ohhh this is my fault?! Okay ill try disabling this - it is quite an old addition as well

[2heal1]

ohhh this is my fault?! Okay ill try disabling this - it is quite an old addition as well

No, i set 'version-first' as default shared strategy , but i prefer to use 'loaded-first' , can we make it as default strategy ? It can help to prevent extra resource request.

[2heal1]

upgrade @module-federation/nextjs-mf@8.3.14 , it can solve the issue

[duannx]

Thanks @2heal1. I'll check it and get back to you with the result

[duannx]

@2heal1 @ScriptedAlchemy, I have checked with the latest version of @module-federation/nextjs-mf and it works as expected. Thank you!