webpack 模块联合：首次尝试加载动态远程时应用程序崩溃

zazmityj 于 2023-10-19 发布在 Webpack

关注(0)|答案(1)|浏览(164)

我们有这样一个场景，一个React应用程序公开了两个不同的组件，这些组件随后由主机应用程序使用模块联合动态加载。我们使用的是动态远程，到目前为止，设置看起来几乎与this module federation example on GitHub.完全相同，除了它被移植到TS。
这在99%的情况下都可以正常工作，但是每当远程重新部署时，主机应用程序就会刷新，因此，尝试再次加载远程，整个应用程序（包括主机）将变为空白，我们在控制台中看到的唯一错误是......
TypeError: Cannot read property 'default' of undefined
.我理解未定义的default源于以下行：
await container.init(__webpack_share_scopes__.default);
在另一次刷新之后，一切都恢复正常，远程组件按预期呈现。直到我们下次重新部署。
任何关于我们如何调试它或潜在原因的建议都将不胜感激。
我们尝试了以下方法：

在ModuleFederationPlugin中，将React依赖项设置为singleton和/或eager
从FederatedComponent中删除了LazyLoading

webpack

来源：https://stackoverflow.com/questions/76435032/module-federation-app-crashes-when-trying-to-load-dynamic-remotes-for-the-first

1条答案

按热度按时间

yiytaume1#

你应该在你的代码中尝试这样做：

const Player = React.lazy(
// @ts-ignore
    () => import('videoPlayer/VideoPlayer') as Promise<{ default: any }>,
);
function VideoPlayer(props: Params) {
    return (
            <React.Suspense fallback={<VideoPlayerLoading/>}>
                <Player {...props}/>
            </React.Suspense>
    );
}

赞(0）回复(0）举报 2023-10-19

我来回答

webpack 模块联合：首次尝试加载动态远程时应用程序崩溃

1条答案

相关问题

热门标签

最新问答