questions about the nextjs-mf source code.

[shinhyogeun]

Hello. @ScriptedAlchemy
I am a user trying to use @module-federation/nextjs-mf only on the client side. I have seen the example that has already been uploaded, and I appreciate the quick update. As I read through the code for nextjs-mf out of curiosity, I have a few questions.

1. I am curious about the purpose of the applyFilePath function. Why does it remove the React-related loader rule for code under @module-federation and files with ?runtimePlugin appended to them? Are there potential issues that could occur when using Module Federation solely on the client side if this code is not present? I'd like to understand the purpose of this function.

2. The InvertedContainerRuntimeModule adds a template to the Runtime Chunk, which registers its own Container Module as a global variable. Could you explain the scenarios where this is needed and what issues it aims to resolve? I am using the default runtimeChunk option of Next.js (runtimeChunck: { name: webpack }).

I am asking these questions out of curiosity about the client-side logic in Next.js. Have a great day!

[ScriptedAlchemy]

1 Hmr in node module breaks. Next loaders are too wide. Applying react hmr to anything that needs to be transpiled. So I strip the loader off node module of federation.

2 next uses runtime chunk single if remote imports hosts remote it breaks chunk loading due to global handler overwrite. So i make a side effect so that host acts like it'd own remote.

Otherwise you'd need 2 remote entry and have to have runtime plugin to detect if remote asked for is the host. If so use something like _single-remoteEntry.js else normal standalone remote entry file

[shinhyogeun]

@ScriptedAlchemy

Thank you for your response. However, I still have some questions.

Regarding your first answer, I’m wondering if the intention is to exclude the code under the @module-federation package and the runtimePlugin code from applying HMR (Hot Module Replacement). Is the goal to ensure that hot reloading does not work for those parts of the code during development? I didn’t fully understand your explanation.

[ScriptedAlchemy]

No it's not that it's that react hot loader from next uses import.meta and next mf js cjs. So it will literally crash any dev build if loader hits it.

This is mainly a problem with how my build (tsc) emits the package.

If hot loader is added to any cjs package = instant break.

So I transpile it but ensure react hot isn't added. Also since runtime plugin isn't react code. You shouldn't need react hot loader on non jsx files.

But in general since control module loading. It's probs best not to fux with it

[shinhyogeun]

@ScriptedAlchemy Thank you for your response. I now understand the first question better. It is indeed a necessary logic considering CJS.

Regarding your answer to the second question, the scenario you’re describing is a bit confusing.

Are you referring to a scenario where A is the host, and b, c, and d are registered as remotes, and when using b (which has c as its remote) in A, the chunk breaks? Is this what you’re referring to?

[ScriptedAlchemy]

Jsonp chunk loading works by setting self.webpackChunkLoadGlobal = installModules

Each runtime has that bind. If you add 2 runtimes from same build like host and it's own remote, the bindings are overwritten so any chunk loaded is pushed into the wrong webpack runtime.

[ScriptedAlchemy]

Window.myFunc = ()=>console.log(a)

Later in other runtime

Window.myFunc = ()=>console.log(b)

Window.myFunc()

User: Hey why isn't it logging a?!?

That's what webpack runtime does basically.