The monorepo contains 3 applications:
- An host application
- A remote module named remote-1
- A remote module named remote-2
First install the dependencies with PNPM:
pnpm install
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
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
-
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 webpackModuleFederationPlugin
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 iferrorLoadRemote
is present and handling the error if the remote entry ismf-manifest.json
. If the remote entry isremoteEntry.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 webpackModuleFederationPlugin
plugin to define the shared dependencies.