Federating a module from another federated module

[tom-sherman]

I want to be able to federate a module from another federated module, so the graph looks a little like this:

graph LR
    subgraph app2
        App2["App.js"]
        SomeModule.js
    end
    subgraph app1
        App1["App.js"] -- federated --> SomeModule.js
    end
    subgraph host
        Root.js -- federated --> App1
        Root.js -- federated --> App2
    end 

I was able to achieve this only after putting @callstack/repack/client into shared scope. Without this each federated module consumer needed to call ChunkManager.configure because each one would get it's own copy of @callstack/repack along with it's own ChunkManager singleton.

Implemented here: https://github.com/tom-sherman/module-federation-repack/commit/2e6dd23f2050ffb6c2eff232bc9a430ef280f251

I think this should ideally be done behind the scenes without configuration, maybe with some global ChunkManager singleton on the window instead of having to import it from repack? If not, would you accept a PR to add this to the example?

The above commit also includes copying loadComponent into app1 also. I think this can be solved by enabling import() (related to #9). I spoke to @ScriptedAlchemy about this and we have a few ideas on how to get this to work.

A note: The above commit doesn't allow App1 to be run in standalone mode, app1 would still need to call ChunkManager.configure in this case

[msvargas]

Hi @tom-sherman, did you get this figured out?

And one question, where did you do your digram? looks good, I really appreciate any help or information related to module federation with react native, if you can help me, thanks!

[tom-sherman]

My fix linked above is the solution we're going with for now. I believe there needs to be some changes inside of repack to allow import() and known remotes (#9) to be used, which would resolve this issue.

And one question, where did you do your digram?

This is mermaid syntax, supported by GitHub mardown 😄 https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/

[ScriptedAlchemy]

Yeah so I looked at the source. I'm pretty sure you're just missing the "last mile"

So once the remote is connected, everything works. But you have no mechanism for actually loading the remote in the first place.

I do something similar for SSR - special runtime requirements for loading chunks, then you'd want to use promise new promise syntax as the remote value & hook into the chunk manager api. So when you import something webpack translates that to custom promise that loads the remote and resolves it to webpack

[msvargas]

Hi @ScriptedAlchemy, do you have some code examples or reference? thank you

[ScriptedAlchemy]

I do but they are proprietary so I cannot share them. This is something I'd like to look at though as possibly open a PR or get on a zoom call some time if I don't have capacity to implement this.

The trick would be to use promise new promise as the value of the remote. That promise would inject the remote and resolve the underlaying get init interface to webpack. Similar to how you did chunk loading in the runtime requirements. Apply the chunk manager to a promise syntax for the remote and resolve the loaded chunk global back to webpack