I have two React applications. One is the remote app, and other is the host app. The remote app uses Webpack 5 using which I have federated the module. The host app uses Rollup for all purposes. I want the host application to use the federated module. How can I achieve this?
The below is how we have exposed the remote app which is running on port 3000.
name: "ResetPassword",
filename: "remoteEntry.js",
remotes: {},
exposes: {
"./ResetPassword": "./src/pages/create-password",
},
shared: {
...packageJsonDeps,
react: { singleton: true, requiredVersion: packageJsonDeps.react },
"react-dom": { singleton: true, requiredVersion: packageJsonDeps["react-dom"] }
},
})
This official Module Federation example solves exactly this issue.
Basically -
remotes.sharedCheck this article for a simplistic walkthrough
btw it's good practice to define the shared libraries/packages in your package.json something like
shared: require('../package.json').dependencies