Interop with webpack-style module federation

[mjackson]

Some larger sites that have bought into "micro frontend" (MFE) architecture with webpack's module federation feature may have a hard time adopting Remix for a portion of their site because we don't currently use webpack 5.

I had a discussion about this with the lead dev on Lululemon: https://twitter.com/ScriptedAlchemy/status/1390091785800589314

My understanding of how module federation works in webpack 5 is that in order to use it, you have to be using webpack and you have to build your giant site all at the same time so that webpack knows everything at once and is able to split up the modules in a deterministic way. This means that if we wanted to support webpack module federation, we would essentially need to use webpack. :/

[brendonco]

Would love to see Remix collaborate with Module Federation. How can we help to scalable modularity both in component and page level?

[luistak]

The overall usage of module-federation is for micro frontends(MFs), so does Remix intend to support MFs in any other way?

Maybe something like remote routes or sub-routes, which we could deploy different remix apps and maybe merge them using a container app, for example:

const URL = 'https://my-micro-front-in-other.hostname';

export default function SomeRoute() {
  return (
    <main>
      {/* Normal route content */}
      <div>
        {/* Render my micro frontend */}
        <RemoteOutlet url={URL} />
      </div>
    </main>
  );
}

cc: @kentcdodds, @ryanflorence

[nemonemi]

My team is starting a new project, and because the desired architecture is module federation-based, it means that Remix, currently without a solution, is a no go :(

I know that Vite has a module federation support. Is there a plan on how such an approach could function in Remix?

I believe interoperability with webpack's module federation would be a good thing for Remix because there will be a lot of applications with fragments ready to be used in new projects (hopefully with Remix), as well as potentially sharing components from Remix and consuming them in other applications.

[nemonemi]

How about with Vite?

For a while now, vite has been supporting it through https://github.com/originjs/vite-plugin-federation
Is there anything else than Webpack, preventing Remix from supporting it?

[sscotth]

There are two remix examples being worked on right now in the module-federation-examples repo. I'm not sure if a vite example is coming.

remix (webpack) PR

remix-rspack PR (WIP)