如何解决共享模块不可用于急切消费打字稿反应

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到index.tsx. remoteEntry.js还添加了app1 的script 标签。尽管如此，它仍然不起作用。

如果我评论主机应用程序中调用 app1 组件的代码，它就会起作用。但是我使用它然后这个错误就来了。

如何解决这个问题？

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

错误是这样的

Answer 1

我有同样的问题，我的解决方案是：

1. 引导程序和索引文件的扩展名应该是.js
2. 在index.js文件中，使用import('./bootstrap.js')而不是import './bootstrap.js'

这对我有用。