A sample app to demonstrate webpack's module federation capabilities.
A basic react app that exposes a component called "Greet", that just prints hello to the name passed as prop.
A react app that imports Greet component from the remote app through webpack's module federation & renders it with a name.
- in
host
&remote
folders runnpm i
&npm start
- Remote app serves on
http://localhost:5000
- Host app serves on
http://localhost:5001
plugins: [
new ModuleFederationPlugin({
name: "remote",
filename: "remoteEntry.js",
exposes: {
"./Greet": "./greet.jsx",
},
shared: [
{
react: { singleton: true, eager: true },
"react-dom": { singleton: true, eager: true },
},
],
})
]
- Delcaring a remote host
plugins: [
new ModuleFederationPlugin({
remotes: {
remote: `remote@http://localhost:5000/remoteEntry.js`,
},
shared: [
{
react: { singleton: true, eager: true },
"react-dom": { singleton: true, eager: true },
},
],
})
]
- Importing from the remote host
const Greet = lazy(() => import("remote/Greet"));
https://webpack.js.org/concepts/module-federation/#troubleshooting
https://webpack.js.org/concepts/module-federation/
Available with webpack 5. Invented by https://github.com/ScriptedAlchemy