我使用以下webpack.config.js创建了一个应用程序（app1）：

new ModuleFederationPlugin({
            name: "app1",
            filename: "remoteEntry.js",
            exposes: {
                "./app1": "./src/components/Sidebar",
            },
            shared: [
                {
                    ...deps,
                    react: {
                        eager: true,
                        requiredVersion: deps.react,
                    },
                    "react-dom": {
                        eager: true,
                        requiredVersion: deps["react-dom"],
                    },
                    "react-redux": {
                        eager: true,
                        requiredVersion: deps["react-redux"],
                    },
                  ....
                  })

以及具有以下webpack.config.js的主机应用程序：

new ModuleFederationPlugin({
            name: "host",
            remotes: {
                app1: "app1@http://localhost:3002/remoteEntry.js",
            },
            shared: [
                {
                    ...deps,
                    react: {
                        eager: true,
                        requiredVersion: deps.react,
                    }
                },
            ]
        }),

当我启动主机应用程序时，它显示：

Shared module is not available for eager 
  consumption:webpack/sharing/consume/default/react/react

我尝试了bootstrap.js方法。在我的例子中，我创建了bootstrap.tsx文件，将index.tsx的内容复制到其中，然后将bootstrap.tsx导入到index.tsx中。还添加了app1的remoteEntry.js脚本标记。仍然不起作用。
如果我注解了宿主应用程序中的代码，在那里我调用了app1组件，它工作。但是我使用它，然后这个错误来了。
如何解决这一问题？
在下面的序列中，文件被调用。请检查图像

错误如下所示