Module Federation users now have a clear upgrade path!
Webpack’s successor has landed, with first-class support for Module Federation.
If you’re using Module Federation at work, you’re probably bundling your app with webpack. You might even have used Create-React-App (CRA) in some projects because you didn’t want to spend hours configuring them (I did 🤫).
You may have tried migrating to Vite despite the lack of official support for Module Federation. If so, I hope it went well (it can be challenging to convert a webpack project to Vite)…
Well, rejoice, because there is a new contender in the game: Rspack!
Rspack
Rspack aims to succeed at webpack (hopefully, at some point, webpack 6 will officially become Rspack). It’s written in Rust and it’s super fast. But for me, this is where Rspack really shines compared with the competition:
- Rspack supports most of webpack’s configuration, as well as existing plugins and loaders.
- Rspack has first-class official support for Module Federation
You can read more at:
Rsbuild
Rspack is at the core of an ecosystem, where you’ll also find Rsbuild. Rsbuild is to Rspack what Create-React-App (CRA) is to webpack. Well, technically, Rsbuild is framework-agnostic. It supports React, Vue, Svelte, Solid, and more… So the equivalent of Create-React-App would be Rsbuild + its React plugin.
But just like Create-React-App, you can create a new project from scratch using the CLI (eg: npm create rsbuild@latest). And the upgrade path from CRA is pretty straightforward, thanks to their guide.
Also like CRA, Rsbuild is batteries-included. It is pre-configured to deliver a complete and performant React app, combined with great Developer Experience (DX). You don’t need to write any configuration to use it. Nonetheless, you may still override the default bundler configuration (Rspack) if you want to.
However, please note that, unlike Create-React-App, Rsbuild doesn’t include any testing tool. So you’ll have to manually add Jest to it to be on par with CRA (or better, consider upgrading to Vitest).
More info at:
Module Federation
Now, the part you’ve all been waiting for: Module Federation! Both Rspack and Rsbuild support the brand new version of Module Federation (v2), which is no longer coupled to webpack (hello Vite!) and supports type sharing when running locally.
But, unless you’re starting a new project from scratch, you will want to stick with the first version of Module Federation (v1.5). Indeed, federated modules on v2 don’t work with modules on v1 (and vice versa).
This is perfectly fine with me! Since Module Federation v1.5 is compatible with v1, you can gradually update your Micro Frontend (MFE) applications to Rspack (or Rsbuild), and expect them to work seamlessly.
Get Guillaume Renard’s stories in your inbox
Join Medium for free to get updates from this writer.
You’ll get full interoperability regardless of whether your applications use webpack, Rspack, Rsbuild, or a mix of them (I haven’t tried with a Vite application, but I expect you’d get the same results as when using it along with webpack, which I already had some success doing). Also, it doesn’t matter whether you update the host or the remote MFE first, Module Federation just works.
You can see some examples at:
- Rspack with Module Federation (v1.5)
- Rsbuild with Module Federation (v1.5)
- Rspack with Module Federation interoperability (Rspack with v1.5 + Rspack with v1 + webpack with v.1)
Currently, there are no examples available that show Rsbuild running along with other applications, but you can easily verify it works by modifying the last example (which I did).
Hot Module Refresh
Your experience with Hot Module Refresh (HMR) may vary. It’s always been a mixed bag for me when working with Module Federation, webpack, and/or Create-React-App. Sometimes it works, sometimes it doesn’t.
However, after upgrading the application to Rspack or Rsbuild, Hot Module Refresh started working, even when mixing it with older webpack MFEs 😅. I can’t promise it’ll work for you as I could not pinpoint what was causing the issue in the first place.
I’m glad Rspack and Rsbuild nailed that one because you can’t have good developer experience without HMR. So, no more hitting F5 to refresh the page and see your changes! Changes are instant!
Upgrade path
If you’re on webpack, it makes sense to migrate to Rspack. But if you’re on Create-React-App, you should rather migrate to Rsbuild.
If you’re upgrading to Rspack, you will need to update your Module Federation configuration. But fear not, it’s almost identical to the one you’re using with webpack. And the same goes for Rsbuild.
However, if you’re using a promise to resolve your remotes, beware that there is currently no official plugin to support it. You’ll have to do the dirty job by hand. See [Feature]: Module Federation supports runtime URLs.
Conclusion
I have been playing with Rspack and Rsbuild since the announcement of the alpha version, and my proofs of concept have been successful.
I have also been impressed by the support I received from the Rspack team; they were fast to answer questions and fix the issue I reported (HMR in Module Federation)!
Now that Rspack and Rsbuild are production-ready, I’m excited to start upgrading my projects and enjoy the new developer experience! What about you?
Cubed
Thank you for being a part of the community! Before you go:
- Be sure to clap and follow the writer ️👏️️
- Follow us: X | LinkedIn | YouTube | Discord | Newsletter
- Visit our platforms: CoFeed | Differ | In Plain English | Venture | Cubed
