Micro Frontends - Custom dynamic remote loader

[@harissaleem6090]

I have used this dynamic Loader logic but when I use react hooks like(useState,useEffect) in child app then it gives me script errors why is that ?

[@russellcanfield]

Are you sharing React and React DOM? Make sure it’s wrapped in a suspense on the host application

[@TiagoAMartinho]

Hey, do you have some example with vite?

[@russellcanfield]

I don’t have one immediately handy but have you checked out the module federation official examples?

[@TiagoAMartinho]

We tried, but doen't work was expected. Basically, we are migrating the host to vite, but the micro frontends use webpack and we trying to do this change without migrate de micro frontends to vite.

[@MengJia73]

Hi @russellcanfield, I am running into another issue that whatever dependencies i install now (such as react-hook-form, formik, react-dropzone), they all got "TS2307: Cannot find module 'react-dropzone/react-hook-form/formik' or its corresponding type declarations.", tried to config the module federation to expose them as well, but didn't work. weird thing is that all the depencencies installed a while back all work just fine. only the new ones i install have this problem. curious to see if you ever encounter similar issue?

[@russellcanfield]

This sounds like a typescript issue, have you changed your tsconfig recently? Exposing them in MF would be a runtime concern. Is this happening in your IDE?

[@MengJia73]

i didn't change any tsconfig. it is not happening in my IDE, only runtime in the browser. hmmm

[@russellcanfield]

@@MengJia73 hard to know without seeing some code. Each app should have those dependencies bundled at build time, MF may allow you to share them but you don’t need to. Make sure they aren’t marked as eager in the MF config

[@MengJia73]

@@russellcanfield yeah i don't think i needed to share them at all. but just for the sake of debugging, i wanted to give it a try. But it works now. turn out to be the node version... was using v16.14.2 and just changed it to v20.4.0 and the error is gone. 🤷‍♂

[@MengJia73]

i am trying to dockerize this project, however I am running into a lot of problems, and there are not many detailed solutions out there. Would it be possible to go over this topic as well?

[@russellcanfield]

Sure, could you help me understand what you're running into? Are you just running your react projects with a reverse proxy like nginx? Any details you could share would help

[@MengJia73]

Thanks@@russellcanfield , basically i am trying to dockerize my application then deploy to Azure for production. Similar to the comment i made in the other video about deployment. I am running into issues like 1. after run nx serve, when i do docker compose up --build, i got remotes started failed, then i need to run npx nx clear-cache to fix it and rebuild, not sure why this is happening; 2. certain dependencies are not included which results in complition error, e.g. "Cannot find module '@azure/msal-react' or its corresponding type declarations." since i am using microsoft identity platform as my authentication. dependencies are installed properly, nx serve works just fine. But docker doesnt seem to get the dependencies installed properly for some reason. I know there are a lot of specific detailed to my project which may not suit into your series. But just in case you have any insights or think any of the points is worth mentioning in your video :-) thanks a lot!!

[@russellcanfield]

@@MengJia73 interesting, have a sample report? How are you building the docker images? Generally you probably want each remote behind nginx

[@BharathiFromSouth]

Nice, Why can't we use the runtime types. You explained in brief. What about directional. Host n remote Why can't we load the remote ts normal file?

[@russellcanfield]

Sorry what do you mean by runtime type? Types are only available in your IDE. Bi-directional should work fine, there were early versions in MFv1 where the types plugin would stall if it had to resolve type but that is resolved

[@BharathiFromSouth]

@@russellcanfield loading modular config at run time like in bootstrap? Is it good/ bad to have all MFE's work as both host and remote? Will it affect the performance?

[@tranminh170]

can you give me your code in this video. Thanks sir

[@russellcanfield]

I don't have it on a branch but this is pretty identical and already in a NPM package if you want to use it: github.com/module-federation/universe/blob/main/packages/utilities/src/utils/importRemote.ts

[@hassasin123456]

Your videos are so good at explaining and way better than reading docs to get my head around this stuff, so first of all thank you for explaining this information. However i am running into an issue, we have a routing problem, so from your previous video, we implemented memory router into 'app2' and bought this into 'host' with the custom hooks etc..which has been working fine. Now we have a requirement to make our application multi tenanted, we are using this importRemote property from module federation. However every time we want to render this component from importRemote into the custom hook, '{something}routeHandler' in host we keep getting error hooks can only be called inside body of function. Other than that if we load the micro ui using a standard lazy import (without importRemote) into the hook, '{something}routeHandler' the component renders fine. abit of a longshot, but thought id leave this here to see if anyone has ideas

[@russellcanfield]

If it works with a standard import statement, are you bundling the remote configuration in webpack? If so, I'd just go with that. If you need to load a custom version of the module based on some criteria and need truly dynamic remotes. It's hard without seeing your setup, you could try the "advanced-api" example in the official MF/examples repo, and see if using their hook loader does anything for you

[@thelostworld.thegioibilangquen]

Hi @russellcanfield, I am using your react-nested-routers example, it's amazing. With this video, I think it would be great if there is a way to use dynamic import in this project. For example, each remote has an ID, in the host routers, I create a path /app/:id/* directing to ExtendedApp, then ExtendedApp imports the corresponding remote with the id and mount the remote app. Then, the remote app can function similarly to how app1, app2 have been implemented in the project.

[@russellcanfield]

This should be possible, you can load a remote inside react too instead of at the import level, then the events can just subscribe on a window object or something similar

[@thelostworld.thegioibilangquen]

@@russellcanfield I tried some methods to load remote inside react. It worked if remote defined in host's webpack. Now, I focus on more difficult scenario. I tried to load remote from a cdn url and not listed in webpack config, but my methods not worked. Do you think have possible way to do that?

[@russellcanfield]

@@thelostworld.thegioibilangquen give this a try, you can also rewrite the loader I have into a hook pretty easily :) github.com/module-federation/module-federation-examples/blob/7c08184902704eb9be29d9cc31944fe641ddc956/advanced-api/dynamic-remotes/app1/src/App.js#L75