如果宿主 React 应用程序不使用 Webpack，如何使用联合 React 模块？

Question

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"] }
            },
        })

Answer 1

This official Module Federation example solves exactly this issue.

Basically -

1. In Rollup host - add Module federation in the plugins section of the config.
   a. define remotes .
   b. define shared
2. Add Rollup remote in MF app.

Check 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