Vite and Module Federation Makes Micro-Frontends EASY!

[@traviswatson6527]

Thank you so much for keeping the MFE and module federation stuff alive. It feels like everyone else, including the React team, is laser focused on the SSR story only.

[@jherr]

Tell me about it. And on top of it we've got people going around spreading FUD about SPAs, how they are "bad for performance". No reasons given. Just "bad for performance". Uh huh. Ok.

[@iriel492ki]

It's for that very reason that I really dislike what's happening in the React + Vercel space. They're solving "problems" that don't really push UX forward. In fact, many people would argue that we're essentially recreating php at this point. I guess this is what happens with marketing-driven-development. Simultaneously, the industry has basically standardized on React/Next so you it seems obligatory to stay up-to-date with this nonsense. It's disheartening.

[@jherr]

@@iriel492ki Having done my time in the PHP salt mines I can say that I don't want to go back to that. I like the state -> html model, a lot. But now there are lots of ways to do that; Vue, Svelte, Solid, Angular, etc. I'm not a super fan of what's going on with React either. They are solving problems that front-line developers don't have. The things I see junior React devs struggle with are things like state management. Fix that, React team. Give us some React state primitives that aren't footguns. And the last time I checked, wasn't Facebook (cough, Meta) mostly a SPA? I haven't been on it in... almost a decade now, so maybe it has changed a lot, but I don't recall FB having a big interest in SSR.

[@iriel492ki]

@@jherr I couldn't have said it better myself. I wish I could thumbs up this to the moon.

[@rand0mtv660]

@@iriel492ki just because they are solving a "problem" you don't have doesn't necessarily mean they aren't solving actual problems. Although I don't necessarily agree with everything React team is doing, usually when they release a feature it does push the industry forward and ends up being inspiration for others.

[@uxhive]

You made micro-frontends unbelievably easy in your previous tutorial where you used webpack. After moving onto Vite, this is exactly what I have been looking for! Thanks a heap Jack!

[@krzysztofradomski3448]

Great video, glad my colleague recommended it! We are actually building a similar system in my company. We use React, TS, Vite and the MF plugin - 5 apps, separate repos, their own pipelines, 5 dockers with nginx, kubernetes, etc, hosted on Azure. Our modules are page level apps with their own routers, and we don't share state other than some cookies. As for common stuff, we share components, utilities and typescript types using an NPM package and a private registry. Still ironing out some details, like auth in modules in local development or css sharing, but overall it seems like a solid solution!

[@xxXAsuraXxx]

Did you have issues with the latest version? Shared dependencies are not singleton

[@unknown-user001]

Why why...When I research something, you already posted those explanations and tutorials. Really Helpful! thanx

[@kasendwaronald]

Thanks!

[@Dev-Phantom]

I was looking for this kind of video for so long. worth watching every second.

[@bartatamas7332]

Thank you for the video. Big fan of the Vite Federation plugin, i hope it will soon support, dynamic remotes, in similar way we have it in Webpack.

[@arnauddsj-monagencecreative]

I heard vite couldn't make module federation so I've gave up on this idea. this is amazing!

[@adnanrruka5152]

I can listen to this man all day. Thank you so much

[@rolandtux]

Huge thanks for your great content Jack. Everytime when I am curious about something and you will make a video about that.

[@AnoopKumar]

This was awsome tutorial Jack. Explained from very low level and how to rectify the issues.

[@KirishimaSpy]

Learned new things. Very sneaky webpack config, appreciate your effort !

[@adaliszk]

This plugin is great, I have been using them for a while now. I ended up writing my own Vite configuration generator to abstract away some of the pain points with it, like the need of referencing the remote base URLs for every remotes and such.

[@p2arthur]

Loved the video! Would also love to watch (and build together) a tutorial of a more complete micro front end using this vite plugin. Thanks for the amazing job Jack!

[@mainendra]

It's been 2 years, wow 🤯. Really excited about module federation, again 😀. Thanks for really awesome video.

[@jherr]

Yeah, it's kind of funny to compare the style of this video to the style of the Module Federation videos from a year (or more) ago.

[@avneet12284]

Great video and very fun. Would be super useful to actually see that whole S3 static store concept you referenced.

[@michaelta05]

Another great video about MF and MFE! You're awesome 💯! I have been watching so many of your videos about this topic recently, some of them are more than a year old but when I tried out the codes, they're still working surprisingly well! Thank you so much for making such a high-quality content, so fun to watch and easy to follow! Just wondering if you could do another round of handling runtime error using the latest techniques available today. Thanks again Jack.

[@jherr]

Maybe? Kinda depends on how Module Federation videos fair on the channel. All these videos are time consuming to produce, so I need to make sure there is an audience that will benefit from them.

[@maddogshwa]

🤯Next level stuff right here.

[@slashieaward]

Fantastic stuff! One really awesome thing you did in this demo, but didn't explicitly call out: You did NOT install Jotai in the host application! When you imported the federated store in the host, Jotai just came along with it, which is so cool.

[@jherr]

Yeah, it goes along with the code that consumes it as library export from the remote. Super clean.

[@almostrandomnickname]

keep goin' loving the vids

[@hertzbergny]

This reminds me of "back in the day," around 9:00 with the federation plugin having this `exposes` and `shared` keys. Before we had Vite and Webpack, we had require.js. Which was the Webpack of its time. The problem with require.js was that it became insanely unmanageable as the dependency list grew. It got to a point where we'd have to leave comments above some of the keys to denote _what_ they did and why. If a dependency was removed, then everything broke. Seems like this is going back to old patterns that couldn't scale.

[@matttamal8332]

I was following along and laughing at the subtle humor up until the webpack interop. The way you identified the source of the issue and fixed it was amazing to say the least. I would like to understand the internals of webpack & the general bundling ecosystem. The word "module" is basically foreign to me on a deeper level. Are there any books/resources doing a deep dive into this (the deeper the better!). Great vid Jack

[@jherr]

You and me both. Honestly the whole multiple module standards in the ecosystem is a huge mess that makes me want to get more into Deno.

[@hodev632]

man this is insanec. thank you

[@SithLordBishop]

Module federation is a big reason we are still on webpack on some projects.

[@CarlosAlexisG]

Great video Jack! Thanks for sharing 👏🏻

[@farzadmf]

Great video (as always). For me, personally, whenever Typescript support is gone or becomes hard, unless the "pros" section is a HUGE list compared to the cons, I'm like "I'll pass for now"

[@phoenix-tt]

It's not really gone, you can still use Typescript with Module Federation, you just have to create a definitions package which describes the contract of your remotes. You use it in remotes to make sure you follow the contract, and you use it in hosts to correctly consume your remotes. It is a bit tedious though, because you have to manually type your definitions, but it's the same as if it was a REST API call

[@farzadmf]

@@phoenix-tt Good points, thank you!

[@jamesdenmark1396]

@@phoenix-tt It's def not the same, with MF things can easily break, imagine props change. The host needs to be updated. This should only be used if you need to embed a application inside another application that are isolated from the host, and doesn't need any prop, then I think it's good fit. As soon as you use it as any other component then any change in the remote - will break in the host.

[@converter]

For host/shell app, I think you can solve the type support by generating types when you build the remote components and then reference the generated typings

[@jimfilippou]

Awesome video thanks!

[@Dev-Phantom]

This project is worth Trying. every bit of it

[@pannichita5939]

TS & vite HMR support are the things that hold back developers to use this approach

[@RhejieAranez]

I'm using vue typescript but when building and preview the host I have an error message Cannot find module 'remoteApp/BlueButton' or its corresponding type declarations

[@ImMr.G]

Thank you @jherr for this great tutorial! I would like to hear your insights regarding the sharing state between micro-frontends, as it seems to contradict the principle of separated entities, which should be its most vital selling point over monolith-repo... The way I understand it, each entity should make its own data call to the server or (for example in case of user credentials/sessions) from cookies, but not from a shared store or state...

[@jherr]

Yes, you should share as little state as possible between MFEs. Ideally just the user JWT, and perhaps something like the cart if you are doing e-Commerce.

[@diego-1404]

Great video, I would have liked to see you include some routing on both the host and remote. I think that is a problem with not being able to include the router in the remote applications.

[@LauPlace]

Great explanation, also to answers the questions that you need to build and preview, that's important to know from the start, Could you share something about how to handle with tailwind classes, I'm having issues with that, cannot get the styles in the host app 🙏

[@garywaddell6309]

One thing I’ve noticed with Module Federation and s3 is 1. Using cloudfront caching can be a pain, need to invalidate quite a bit and interconnected shared components can get confusing 2. Lots to maintain and setup in Cloudfront when using many services, it can get confusing especially with the ugly cloudfront urls. That said I do really like Module Federation 🙌🏻

[@DI3GOskill]

You can solve this by creating custom cloud-front behaviour, you can add a policy for cache disabled targeting only the entry file then all the other files are safe since they will be generated with an unique hash.

[@ABC-ip6jq]

I've spent some time with this trying to set up a remote app (vite) in a project where I don't control the host app (webpack). I got "SyntaxError: Cannot use "import.meta' outside a module (at remoteEntry.js:8:30)". At 9:50, line 9 in this video. Do you have any suggestions on how to get around that? I guess it's esm related, but I can't seem to figure out a way to solve it from the remote app.

[@soumiksaha5726]

Were you able to figure this out? I am getting same error

[@NhãNguyễn-j5t]

when I config follow your desc, i see the hot reload is disabled. When I change code in remote app, the host app can't watch and change. Can you help me to make the host app can read the remote, please.

[@AdiAdi-yd4pj]

Excellent video, sir. I prefer the port numbers to be provided via the vite.config.js from server: {...viteConfig, { port: 5001 }, preview: { port: 5001 } }

[@gfox1984]

Hey, nice video! That's cool that you can start mixing Vite & Webpack applications, but it raises a few more questions: 1/ how would you make your host load both Webpack & Vite remotes (ideally, in an agnostic way) ? 2/ could the host use Vite and load a remote Webpack application? Thanks again for your videos on MFE, they are really becoming one of the main sources of knowledge on the topic !

[@jherr]

1. You mean without that default hack? Dunno. I mean, you could wrap it in a function that looks at the module export and sees if there is a default and uses that. 2. I'm not sure I understand what you are asking, but sharing a whole application sounds unwise at best.

[@gfox1984]

​@@jherr 2/ I mean, if you take your example at 20:00 and do it the other way around: you implement and expose a button from a remote Webpack app and try to import it in a Vite app (the host)... Can it work?

[@jherr]

@@gfox1984 I haven't tried it, and I invite you to, it would be simple, but I would be surprised if it didn't work. There is really nothing magically going on here. The React components are the same functions, code wise, whether they are imported directly, or through a mono-repo, or through Module Federation. If you can get access to the component function, and you've done so without bringing in another instance of React, then everything should work just fine.

[@gfox1984]

@@jherr I have to say I got cold feet looking at the note on their repo: github.com/originjs/vite-plugin-federation#integration-with-webpack "It is not recommended to mix Vite and Webpack in React projects, as there is no guarantee that Vite/Rollup and Webpack will generate the same chunk when packaging commonjs, which may cause problems with shared." But I'll try to give it a go

[@master_lionel]

I'm going to try this 😋

[@drdezmond1]

Great work as usual, like your videos, if you have time I would be really interested in seeing video about deploying module federation app

[@jherr]

I already have one of those in the Module Federation playlist.

[@vladimirgusar4173]

Джек как всегда хорош!!!

[@jherr]

Спасибо за просмотр видео!

[@gustavomelo6560]

Hi Jack! Great content. This video is stimulate my team to make a architect decision on new project. Could you please help me understand the challenges about management host and remote shared dependencies? Imagine multiple teams working on multiple remotes apps and a multiple commons dependencies.

[@edu_sdorneles]

It`s a nice and easy way to use micro front-ends! But, how works in production? I`m facing some issues with CORS using vite-plugin-federation :/

[@NurzhanBK]

Hi! Thanks for the video. I'm trying to use vite app as a host and webpack app as a remote but there is a cors error, can you help me how fix this error?

[@djorji7114]

In real application should we share the whole app component of each remote app, and download it lazy? And how can I implement nested routing in this case?

[@EthanStandel]

I was really excited to see this video because I was hoping that you could finally use MF between running dev servers. The fact that you had to redeploy the remote (rather than just having a dev server auto update it with the perfect of Vite) was determined to make this plugin a non-starter for an org I was working for last year. 😔

[@p-j-y-d]

Agree. The inability to serve remotes with dev server is a deal breaker to me. I'm evaluating using @module-federation/vite instead, which works with dev server. It doesn't propagate hot reloading from the remote to the host and we need to refresh, but this is better than rebuilding on each change.

[@tigpalmas]

Thank you so much for this i could make it running but having problems with tests. any ideia how to test this in host applications ?

[@gunasekaran7425]

Hi sir, I'm creating a project with vite with vue3, i m using vite plugin SSR package, and implement the microfrontend with vite plugin federation, but error is occured, my error is file, data, node only allows with esm, not support http, how to solve this, please give the solution

[@gunasekaran7425]

Error when evaluating SSR module /component: failed to import "localhost:3002/dist/client/assets/remoteEntry.js" |- Error: Only URLs with a scheme in: file, data, and node are supported by the default ESM loader. Received protocol 'http:' at throwIfUnsupportedURLScheme (node:internal/modules/esm/load:239:11)

[@gunasekaran7425]

Any solution for this issue sir

[@domic93]

It was really easy to learn. thk

[@rasmusk537]

So now I am wondering, how do you unit-test your frontends when your components no longer exist in build time, but only in runtime?

[@fernandosoaresdev]

Excelent video, top level information! Jack, is there any way to pass props to the remoteApp component?

[@miguelship3]

Hey jack, thanks for the enlightning video, If you wanna go the opposite, I mean, to consume a module from webpack to vite, what would be the config in the vite project? If you have a reference it will be awesome, thanks.

[@asafnovak2219]

Thank you for sharing! any ideas how to make HMR work? So that any change in the remote component will be immediately reflected in the host. I've seen your comment about setting up --watch mode, however in our specific use case, the remotes can get pretty large, with thousands of components making the watch cycle a very bad dev experience.

[@Utsi74]

Thanks for a great video! I've been testing Vite/MFE with a large remote-app with multiple dependencies, and it seems like this is not the best fit. The Vite-plugin is not able to handle old libs that are not configured exactly the way they're supposed to be. With Webpack, on the other hand, there are workarounds. Looking forward to be able to move away from Webpack when the technology has matured!

[@jherr]

From what I hear from Evan You Vite is going to put full first class support for Vite into the framework. So here is hoping for improvement.

[@robovirtuoso1354]

Next is figuring out how to make these work in production builds. Localhost ports just won't work in that case. Nice tutorial.

[@jherr]

You need to look at environment variables and change the URLs to the deployed locations during production build.

[@DesenvolvimentoBR]

Thank you!

[@adfasdfasdf643]

Thanks for the video! Not a big fan of MFEs, seems to me like it's adding more dynamic boundaries when the majority of workplace problems are caused by misalignment between teams already. IMO we need more typing not less. I feel like this will introduce the same kind of tribalism as BE microservices

[@adityaprakash8291]

One big problem comes up when you open up the browser's sources tab and try to find a file and debug it, you won't find it

[@khalilbessaad5553]

I wonder how MFEs will evolve with stuff like Astro around

[@rajagowthu]

Good Explanation. If possible, can you do one video on module federation with Nuxt 3, this will be really helpful if you can make it. I have explored on the Google, but didnt find examples related to Nuxt3 module federation with shared libraries like PrimeVue

[@LefterisLalos]

Truly an eye opener. Appreciate your video Jack. Is there support for a Webpack 4 app to act as the host application ?

[@jherr]

Yeah, it's totally interchangeable.

[@LefterisLalos]

@@jherr Have you figured out a way maybe to use dynamic remotes with this plugin ?

[@MrDeibl]

awesome video thank you very much for the content. really great how up to date technologies you are testing and presenting! sadly the part with having module federation as a host and a vite as remote doesn't work on my end. could you link the github repo as comment?

[@jherr]

GitHub code link is in the description.

[@JairoVides]

Hi Jack thank you for your video, please Jack could you tell us how to share data between host and microfrontend?

[@maretzelaltar7833]

I really love your videos. I am just starting to learn about MFE. I would just like to ask if i can have different versions of react on host and app? lets say i have a legacy code that we can't upgrade the react version to be the same version as my MFE would that be an issue?

[@derekcarday]

Is that actually a window to outside behind you? That's beautiful! Where do you live?!?!

[@jherr]

Portland, OR

[@grzesieksgs]

The module federation stuff is great BUT problematic in terms of web workers. I tried both webpack and vite and when You have to consume federated module inside of web worker, then it gets problematic, or to be more precise - right now it is simply broken. Hope they will deal with it someday.

[@jj28a]

I liked your video, nice explanation, easy to follow, I would like to move one step forward, how to handle the errors like when remote app is down or not built, could you please post a video or comment on this, it will be really helpful, I am working on vite vue module federation

[@tokendevelopment2136]

i plan use library UI like shadcnUI but shadcnUi cannot shared in config module federation because in nodemodules nothing export , because of that error when i"m import shadcnui in shared configuration, but when i"m not import in parent module style shadcn not generate, any idea for solved this issue ? in remote/child nothing issue just in parent module

[@IrnesDuran]

Anyone tried Vite based module federation with Remix??? I cannot get assetUrl exposed, and “shared” is not allowing react and react-dom to be externalized

[@csIn84]

When using proper SolidJS functionality, I got it to build, but for some reason, it's not exposing the remoteEntry.js file at all (or even creating it in the /dist folder).

[@xWildStorm7x]

Great tutorial! I have a question, lets say, if I expose a Micro-Frontend using Module Federation with Vite, can I consume it somehow from a Next.js application?

[@gabrielmedel2411]

Great video! Can you tell us wich browser are you using?

[@jherr]

Arc.

[@chenrvn]

Thanks a lot!! is it also support Angular?

[@ngocquach9961]

could you explain more about typescript apply for micro?

[@jherr]

There is a plugin now for TypeScript with federated modules. I haven't looked into how it works. But the approach that I've heard in the past is that when the federated module is created a sibling .d.ts file is created, zipped and deployed alongside the JS file for the module. Then when the hosting application is built the plugin pulls down the zipped .d.ts file before TSC compilation, and... viola. Types.

[@RobertoGPuentesDiaz]

if I ask you do make a decision between for example ASTRO and MFE .... is it a valid question ? and if the answer is yes, what do you choose?

[@MahdiHasani-rt5pt]

So if we should build after each remote app change, can we not have HMR to watch changes live?

[@claus4tw]

Nice! How do you share the user session to the mfe? Like a user profile and a shopping cart. User profile needs a session so does shopping cart. Can we do two-way-mfe ?

[@jherr]

You could share the whole session object with an atom, but I'm not sure I would do that. I would create some atoms that pull out the specific data that the MFEs need so that an auth provider could change later.

[@Dadaadad268]

I see some projects using Module Federation within a Monorepo. Why would you do this if the monorepo (Turborepo) can manage the micro-frontend archictecture?

[@JamesCrawley-x3d]

Is anyone else having issues running the host & remote from the github repo? I'm getting an error on the host: `createContext is not a function`

[@raulescamilla3328]

Hey Jack, I don't remember if I made this question in another video. I am using Vite and its module federation plugin. All works fine but when I try to run vitest as test runner I get an error trying to load the remote url, how I can mock that url and tell to my test that ignore the components from remote app used in the host application?

[@przemysawlewtak789]

hi Jack, amazing tutorrial, just the question: how to fix typescript issue? Having a problem in host app where i try to: import Button from "remoteApp/Button"; and typescript complains: 'Cannot find module remoteApp/Button or its corresponding type declarations

[@jherr]

As mentioned, TypeScript is a problem for Module Federation. There are some options but I don't know of any standard simple fix. If you want to fix it manually then you need to declare the remote module in the types.d.ts of the host app.

[@przemysawlewtak789]

@@jherr yeah...i thought so, thanks for reply

[@urostripunovic3499]

Why do you need the index.ejs file? Is it because when webpack is building the application it is then required to change all of the chunks or js files into a module type despite already having the library as a type module? if that is the reason why do you need the ejs file?

[@jherr]

By default the Webpack index templating logic doesn't add the script tag as a module. So we disable the original injection and then add our own injection using ejs and specifying the type of module.

[@urostripunovic3499]

@@jherr Thank you for answering, I also have a follow-up question if you have the time. If someone were to export their webpack MFEs as a type module, all that is needed then is for the receiver to have the ejs file ready? Edit: I got it working all I had to do was enable the CORS policy and remove the @-symbol that is used with webpack! I leave the comment up for others to see.

[@mandalorian99]

Another great walkthrough. I've been coding along and I've initialised react ts project instead. It threw me a ts error. In order to correctly import the button I had to add a type declaration for it in my host project. I guess its because we load projects/modules dynamically at runtime and typescript doesnt know what are the types. Thanks a lot for the input and insights youre giving!

[@АйТиЗумер]

can you please tell me about your solution with typescript?

[@nguyentheson9315]

Is there someway that i can integrate my remote app made with just html, css, js (or other tech stack that might not be supported by vite) into my host app (vite-plugin-federation)? Thanks in advance!

[@jherr]

Not unless it's bundled with a bundler that creates a federated module.

[@sivaprakash7735]

so, @jherr please let me so vite only provides build time sharing not runtime sharing? I tried loading the remotes dynamically in runtime, when I stops the remote the shell goes down!. I can't run both in dev mode, how I do with Webpack.

[@meshcash]

Thank you so much for video! This is super useful information🚀 What do you think about Vite and Turbopack? Which bundler more convenient for SPA?

[@jherr]

Personally I'd rather go with Vite.

[@jermsam]

How would you deal with cors issues? Out of curiosity, I followed this tutorial but used NextJs (from create next app) as remote and react (from create react app ) as host but ran into a cors error saying that access to **/remoteEntry has been blocked by CORS policy

[@jherr]

Proxy through your local server?

[@adamzalesak]

@jherr Hi, great video. Should be the remote app developed independently? I mean should I run on local just the remote app? What if there are some deps on the host? I have to "mock" the dependencies like store or router?

[@jherr]

Remotes should definitely be deployed independently. If you could deploy them together then you don't need Module Federation and if you can get away with that it definitely simplifies things. If you have shared dependencies between host and app you can have those as exported dependencies of both and MF will do the arbitration so that they share the same code and the same instance in the running application.

[@adamzalesak]

Thank you. I mean how to handle local running during development. Is it appropriate to be able to run the remote app alone on local? If so, I need to solve the missing deps from host (state management, react query cache, common router, ...)

[@jherr]

@@adamzalesak Any dependencies between the remote and the host should be considered part of the contract between remote and host. So if you have a lot of them I recommend building a test harness that provides all that. That being said, I think having a lot of dependencies (state management, etc.) shared between them is a bad idea. An alternative would be to provide context to the MFE with just what is required to drive the MFE.

[@vaibhavkhushlani3836]

so every-time we do any changes in remote app we have to rebuild to get the preview can it automatically show the latest changes ?? pls answer this question

[@alexismm96]

How do u manage the app when a remote app is not available?

[@jherr]

Remote modules are just Javascript files. They should be deployed via S3 or CDN and do not rely on the host application running in order to serve them.

[@uguremirmustafaoglu40]

One question about the bundle size. If remote and host has same dependencies, we will be shipping the same code twice such as react, react-router and all other common stuff. Am I missing sth here?

[@saraibarra4521]

Do you have any resources on react typescript with vite mfe?

[@rattlesnakerenegades770]

Hi Jack, i'm a big fan of your micro-fes videos, thanks a lot. Lately I got an Astro project to consume using Vite a Vue micro-fe exposed via Webpack with module federation. I am currently struggling to make it work with SSR. Just wondering if you could provide some help with micro-fes and making them run in SSR mode (ie with Astro). Best regards!

[@jherr]

I would check with Fred and the Astro team on that, but my guess is that they probably don't think that's an awesome idea. Honestly, MFEs in SSR never really made much sense to me since I discourage using MFEs for mission critical page elements. So doing MFEs primarily on the client is ok with me. But hey, I don't know your use case, so if you require SSR then yeah, I'd reach out to that team.

[@amirtorabi3978]

How about building and i tegrating tools for Mfe?

[@OnlyGamerNerd]

Vite and module federation still has an issue with dynamic remote containers.

[@radulaski]

It would be great to see your take on solving runtime crashes when appling module federation.

[@jherr]

There are lots of options around hardening. You can use ErrorBoundaries. You can do some fallback behavior to a lazily loaded import of the build-time module. But all that requires a lot of work to implement, test, and stay consistent with it. So it's a big commitment.

[@radulaski]

@@jherr and if there are some breaking changes in one of the libs some kind of versioning might be required. It seems like it becomes very complicated rather quickly. Sharing CSS seems like a pain too, as I understand it it has to be bundled with JS. Shared lob versions need to be synced between teams.

[@jherr]

@@radulaski Yep, totally agree. That's why I put a section in this on pros/cons because there are a lot of cons. It's great to have access to this functionality, but it comes with a lot of risk and complexity. In a lot of my previous videos I didn't cover the downsides and folks came away thinking that Module Federation was way easier than using a monorepo. When in reality, it starts off being easier to share a component, but to actually get it hardened to production level, it's way harder than with a monorepo.

[@BerndBasmer-iconag]

Thanks for this great video. It definitely helped me a lot to understand the concept using Vite. 🙂I have a question though. I'm trying to use Vite to do dynamic module federation. Meaning, I get the modules that I need from an API and want to dynamically inject them into my host application without manually putting them into the vite.config.ts. I know that this works with Webpack but does this also work with Vite? I tried it out but there seem to be some glitches still. Does anyone have experience with this or can point me towards some information on how to set this up?

[@CasiMaduro]

+1, lazy loading with module federation is a bit tricky

[@aayubov]

How is it possible to dynamically inject modules? I don’t get it. You have to declare all the modules in the config and then import them in code, right? Even if dynamic import could help with importing something based on API response, how do you update the config?

[@lucasgiunta8874]

Verry intersting, i'm wondering, this module federation will work with multiple svelte app ? As svelte app (no sveltekit) doesn't have a dependencies, what to include into the dependices of the fedaration ?

[@jherr]

Svelte actually works just fine with Module Federation the last time I tried it.

[@saharsamohanty6481]

single-spa uses in browser module resolution so effectively also doing run time module resolution. What are the benefits of this approach over that? It feels like single-spa has already done what module federation is trying to do now. But please feel free to correct me if my assumption here is wrong.

[@jherr]

Single SPA is focused specifically on UI component sharing, and it is _fantastic_ at that. It also helps a lot with inter-framework development. So putting a Vue component on a React page is not a problem with Single-SPA. What Single-SPA doesn't do well is more low level sharing, if what you want to share is just logic, they don't have a model for that AFAIK. FWIW, I see the two approaches as complimentary. Last time I checked Single-SPA could leverage Module Federation as a code transport method. Also I think the import method for Module Federation is way cleaner than SystemJS.