React dynamic module federation about nx

[VanTigranyan]

@Coly010 I ended up using @module-federation/enhanced with rspack on react and angular now just consumes these remotes using loadRemote(). It worked flawlessly. I was able to solve all problems I had. I used its plugin instead of NX' one. Thank you so much for pointing me to it. I would struggle for days if not that suggestion. So all problems are solved. Thank you very much again.

[VanTigranyan]

I think to fix this, react remotes should generate remoteEntry.mjs instead of remoteEntry.js, otherwise the browser basically doesn't recognize remoteEntry as a module, hence import.meta is not available in that js file.

[VanTigranyan]

I want to add that when I load a react remote app supported by the same NX setup in my angular shell app, it works without any issues.

[VanTigranyan]

@Coly010 Hi. Maybe you have some context?

[Coly010]

I think it does just boil down to the ESM issue. I would have bet that we did generate .mjs remotes for React, but it seems not. I’ll have a look

[VanTigranyan]

@Coly010 Thank you very much. I'll wait for your update.

[VanTigranyan]

Just FYI: I did dig into MF plugin config and seems like it is set to output a module, but the fileName is set to remoteEntry.js. Taking into account that webpack bundles react and doesn't output ESM, I think this is where the conflict resides. CommonJS react bundles try to execute an ESM module. Obviously this doesn't work.

[Coly010]

Interestingly, I wasn't able to reproduce this on a new workspace I just created.

I'll take a look at your repo now, but let me know if this one works for you: https://github.com/Coly010/nx-react-dyn-fed-demo

[Coly010]

@VanTigranyan Found the problem, you didn't have loadRemoteModule wrapped in React.lazy. Unfortunately, this is a requirement currently due to how the scopes are initialized with MF.

I created a PR to show this: VanTigranyan/nx-react-dynamic-mf#1

[VanTigranyan]

@Coly010 OMG. I am so stupid. How could I forget that. I understand how that works for components. But what if I want to get a shared library from my react remote?

[Coly010]

@VanTigranyan Like this: VanTigranyan/nx-react-dynamic-mf#2 :)

I'll admit the ergonomics of this are not great.
However, we use the @module-federation/enhanced package now, so instead of using the setRemoteDefinitions and loadRemoteModule that we export, you could use the following:

https://module-federation.io/guide/basic/runtime.html#registerremotes

Do a fetch for the module-federation.manifest.json and iterate through it and call registerRemotes
Then when you need the remote use loadRemote: https://module-federation.io/guide/basic/runtime.html#loadremote

[VanTigranyan]

@Coly010 I can confirm that even with React.lazy() I can import only components. So we are blocked if we want to import other things, such as shared libraries. And even if I export a dumb component with the library, I pretty much have to count the component so that React.lazy() works a loads the lib. How do we solve this problem?

[VanTigranyan]

@Coly010 I tried your solution. It's great. The problem is I wanted to expose another module (shared state) from the MFE itself, without creating another MFE just for sharing a library. But I guess I can work with this for now. Thanks a lot for looking into this so quickly and for great suggestions. I am at least unblocked right now.

[VanTigranyan]

One more question I have is whether @module-federation/enhanced is used for Angular Module federation as well?

[Coly010]

You can follow the pattern that i created with the new MFE and just apply it to an existing MFE. the @nx/react:federate-module generator allows you to specify and existing remote and it'll add a new export to it that can be consumed via loadRemoteModule.

Yes @module-federation/enhanced is also being used for Angular

[VanTigranyan]

Just tried your example with @module-federation/enhanced, and I got the same error as before. So it works with loadRemoteModule but not with loadRemote. I'll try @nx/react:federate-module

[VanTigranyan]

@Coly010 Sorry for bothering so much. I just want to get answers to all problems that we have so that I can start to work on building the actual application. Is it possible to load a dynamic remote into another dynamic remote? Let's say we have menu that we want to share and setup it as an MFE. then I want to load this menu dynamically in another dynamic remote (let's say dashboard) and that remote gets dynamically loaded into the shell. Right now I cannot get it to work.

[Coly010]

@VanTigranyan Theoretically yes it should. I'd be interesting in seeing the error you're facing with it

[VanTigranyan]

Oh, it's the same error with import.meta not being available.
For the context, we have a huge Angular application, that we are trying to decouple into smaller React-based MFEs. So I added MF setup to Angular to act as a shell, then created a react app as a remote. I managed to dynamically load the remote and render it. I managed to solve the routing, navigation and state-sharing problems. The only thing that remains for me to solve is loading another react-remote in the first one I mentioned. After experimenting today I found out that when I set the definitions in the shell, even if I use loadRemoteModule in a remote, it still sees the definitions and can load another remote. But this works only if the host is react. I tried to set definitions in Angular shell using both react/mf and angular/mf libs, so that each app type gets the definitions but that didn't help either. I found that when I share @nx/react in Angular and when I do it in a react shell, the output is not the same, hence, I guess, Even when I share @nx/react from Angular, the react remote loads it's own instance of this library, meaning the 'singletion' param doesn't work in multi-stack MF setup.