Nx: Webpack 5 / Module Federation

[StevenLangbroek]

Description

Webpack 5 has a new feature called Module Federation (I'm sure it's caught some folks' attention by now), allowing you to at runtime import parts of bundles from other applications. I could see this slotting into nx quite neatly, for example by allowing the exposes property of the plugin to be set in nx.json:

{
  "projects": {
    "chrome": {
      "exposes": {
        "AppContainer": "src/App.tsx"
      },
      "tags": []
    },
    "chrome-e2e": {
      "tags": [],
      "implicitDependencies": ["chrome"]
    },
    "settings": {
      "tags": [],
      "exposes": {
        "Settings": "src/Settings.tsx"
      }
    }
  }
}

I tried looking for an existing issue but couldn't find any, so thought it would be worth bringing up. Would love to hear what you think about Module Federation in general, and what it could mean for NX. Thanks <3

Some links:

• Documentation
• Demo

[Vynlar]

Just wanted to leave my two cents on this topic:

My current project demands that we are able to independently deploy + load each individual page of our SPA. As far as I can tell, Nx lets you build each app independently but that does not allow me to build each page independently. I can simply use module federation in a typical monorepo but Nx's tools around tracking "affected" modules is incredibly nice. I would love to be able to take advantage of both module federation (for independently deployability/runtime composition) alongside the great developer experience that Nx is known for.

Does anyone have a sense of how difficult it would be to accomplish this?

[smasala]

Agree with @Vynlar. This would be a huge game changer in terms of creating isolated buildable and deployable apps which can then be part of a single and larger SPA.

[jandvik]

Just wanted to leave my two cents on this topic:

My current project demands that we are able to independently deploy + load each individual page of our SPA. As far as I can tell, Nx lets you build each app independently but that does not allow me to build each page independently. I can simply use module federation in a typical monorepo but Nx's tools around tracking "affected" modules is incredibly nice. I would love to be able to take advantage of both module federation (for independently deployability/runtime composition) alongside the great developer experience that Nx is known for.

Does anyone have a sense of how difficult it would be to accomplish this?

I have the same requirement. Unless a plugin or other solution to this becomes available in the next few, I'll have to move forward without using Nx 😢. We will be building one central Micro FE component library that will be used by multiple sites, all of which will also have to be Micro FE, using the component library. Webpack 5 Module Federation + Nx would be perfect for this.

[ashinga48]

+1 for any pointers to develop this.

[luke-siedle]

As far as I know, Webpack 5 is not yet supported in nx.dev, although Next 10 has support for it. Any news on when Webpack 5 support might land?

[jeffgaynorspok]

I'll mirror the importance of these requests. We are looking to move our frontend to leverage NX + Single SPA + Webpack 5 Module Federation for micro-frontends. Any additional support for custom webpack configs per application and to easily export into separate NPM packages if needed would be spectacular.

[MaurizioCasciano]

This link explains how to use Module Federation in a NX Monorepo
Angular Architects

[jeffgaynorspok]

This link explains how to use Module Federation in a NX Monorepo
Angular Architects

@MaurizioCasciano Thanks for the link. I'll read through this thoroughly to see if I can make it work with React, as we don't use Angular.

[MitkoTschimev]

@jeffgaynorspok Had you luck with a working setup?

[jeffgaynorspok]

@jeffgaynorspok Had you luck with a working setup?

@MitkoTschimev I have a work-in-progress setup that functions with NX, Single SPA, and React Applications with Webpack 4.42.0 (currently shipped with NX). I got too many errors with Webpack 5. I will attempt again with Webpack 5 once I have a clean setup.

[MitkoTschimev]

Same happened for me. I will wait till nx supports webpack 5 with Next and react.