Vite Module Federation

[falldowngoboone]

My team are in the process of converting our Create React App project into an Nx monorepo. We plan on using module federation for various shared UI components (e.g. navigation). I was excited to learn Vite now supports module federation because there is interest in switching to Vite from Webpack. Unfortunately, after having issues with implementing the Vite MF plugin, I discovered this issue: #13354.

I would like to officially request this feature, as well as a way of migrating from Webpack MF to Vite MF.

In the issue, it was stated this work was planned, but I can't find anywhere in the Nx 16 roadmap mentioning this. Is there another place where work like this is planned?

[iconag-bbasmer]

That would be awesome but it also should make sure that dynamic module federation is also solved. I had an issue with the Vite MF plugin described here which I couldn't solve and had to drop working with Vite and use Webpack instead. I would LOVE to get back to Vite for obvious reasons.

[jaysoo]

@falldowngoboone It is something we're looking into, but there's no timeline or commitment yet on this feature. I sent you an email

We're making many improvements to the Module Federation support. If anyone wants to reach out and discuss it with me feel free to email me at jack@nrwl.io.

[yoshhiii]

@jaysoo Is Nx considering supporting native federation or something similar as part of the Module Federation improvements? With Angular 17 defaulting to esbuild for new projects, I'd love to know if there is any plan to support module federation working with other bundlers

[v4irajvimu]

any update on this?

[Cabinet20]

I'm also curious if there are any updates on this. We are looking at adding module federation to a project but Nx uses webpack and we are a little worried that angular will force esbuild and leave us in a bind.

[falldowngoboone]

There has been a lot of research by the Nx team regarding module federation in general. Check out https://github.com/philipjfulcher/nx-vite-module-federation, which looks to be the latest iteration.

I will warn you, the developer experience is not that great. You must bundle the code to run you micro app in context using preview. This is really a Vite issue at its core.

Rolldown (https://rolldown.rs/) should solve these issues completely, along with some other inconsistencies between dev and prod builds, once it's in full official use.

FWIW, my team had pretty much set our sights on module federation, but we ultimately moved away from it due to the complexities of deployment management and the difficulty of troubleshooting runtime dependency issues.

Nx gave us the ability to do the thing we really wanted to do, which was the ability to partition our code along team concerns.

If/when the challenge of Vite module federation is solved satisfactorily (personally my money is on agnostic module federation), we'll be in a better position since we've already split our application up which is a non-trivial first step to micro front ends.

[Cabinet20]

Have you any indication, or thoughts, that it would be safe to pick webpack module federation, as it works just now in Nx, and trust that Nx will have their usual clean upgrade path when an esbuild one is available? I would love to use as I think mfe would really suit our project.

[falldowngoboone]

As long as you don’t mind maintaining Webpack configuration, I don’t see anything risky about using Webpack’s module federation solution via Nx’s plugin. It comes down to what your priorities are. If module federation is something your project requires, then Webpack is a safe choice.