如何解决共享模块不可用于急切消费typescript React

Question

我使用以下内容创建了一个应用程序（app1）：

webpack.config.js

以及具有以下 

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

中。还添加了带有 app1 的

index.tsx

的脚本标签。尽管如此，还是不行。如果我在主机应用程序中注释了我调用 app1 组件的代码，它就可以工作。但我使用它然后这个错误来了。

如何解决这个问题？

按照以下顺序，文件被调用。请检查图像

错误是这样的

Answer 1

引导程序和索引文件的扩展名应该是

remoteEntry.js
1. 在
.js
2. 文件中，使用

   index.js

   代替

   import('./bootstrap.js')

这对我有用。

Answer 2

https://webpack.js.org/concepts/module-federation/#troubleshooting

ModuleFederationPlugin 作者的视频也解释了这一点。

https://www.youtube.com/watch?v=d1SS7KAsbdY&t=356s