patricklafrance/mf-enhanced-poc

POC to try to the Module Federation enhanced package from the Module Federation 1.5 release

mf-enhanced-poc

The monorepo contains 3 applications:

• An host application
• A remote module named remote-1
• A remote module named remote-2

Usage

First install the dependencies with PNPM:

pnpm install

Development server

To start the application in dev mode (make sure ports 8080, 8081 and 8082 are available):

pnpm dev

Open a browser at http://localhost:8080/.

The remote module entries are available at:

• http://localhost:8081/remoteEntry.js for remote-1
• http://localhost:8082/remoteEntry.js for remote-2

If you prefer to start the application and modules separately:

cd packages/host
pnpm dev

cd packages/remote-1
pnpm dev

cd packages/remote-2
pnpm dev

Production build

To start the application with production build (make sure ports 8080, 8081 and 8082 are available):

pnpm serve-build

Open a browser at http://localhost:8080/.

The remote module entries are available at:

• http://localhost:8081/remoteEntry.js for remote-1
• http://localhost:8082/remoteEntry.js for remote-2

Findings

• For React Refresh to work properly, the host application and every remote modules must configure webpack output.uniqueName option.

• When using the init function from @module-federation/enhanced/runtime instead of the webpack ModuleFederationPlugin plugin, for the shared dependencies to be recycled, they must be configured as followed: https://module-federation.io/guide/basic/runtime.html#loadshare.

• When using webpack ModuleFederationPlugin plugin, ModuleFederationPlugin will throw even if errorLoadRemote is present and handling the error if the remote entry is mf-manifest.json. If the remote entry is remoteEntry.js instead, it works fine.

In short, the following works:

remotes: {
    "remote1": "remote1@http://localhost:8081/remoteEntry.js"
}

but the following doesn't work:

remotes: {
    "remote1": "remote1@http://localhost:8081/mf-manifest.json"
}

Error
[ Federation Runtime ]: [ Federation Runtime ]: [ Federation Runtime ]: [ Federation Runtime ]: [ Federation Runtime ]: [ Federation Runtime ]: [ Federation Runtime ]: [ Federation Runtime ]: [ Federation Runtime ]: [ Federation Runtime ]: [ Federation Runtime ]: Failed to get manifestJson for remote1. The manifest URL is http://localhost:8081/mf-manifest.json. Please ensure that the manifestUrl is accessible.

Error message:

TypeError: Failed to fetch

• The best way so far seems to use the init function to define the remotes, and webpack ModuleFederationPlugin plugin to define the shared dependencies.