问题标签 [webpack-module-federation]

我有一个微前端应用程序，它由一个容器应用程序和几个远程应用程序组成。它使用带有 Webpack 5 模块联合的 ReactJS，并且在我的本地环境中运行良好。但是，当我将它部署到 AWS CloudFront 时，它并没有按预期工作。

似乎容器应用程序在正确的路径上加载，但“未定义”被添加到遥控器的 remoteEntry.js 文件的 url 中。

请看下面的截图：

容器项目 webpack 生产配置如下：

远程项目 webpack 生产配置如下：

容器项目 App.js 如下：

我正在努力找出错误所在。我不确定它是否有错误：

• 反应
• 反应路由器
• Webpack 模块联合
• AWS CloudFront

任何帮助，将不胜感激

我正在使用 angular 11 和 webpack 5 模块联合。我计划从遥控器中公开组件。

从“mfe@component”导入 import {component} 时

我收到构建错误“找不到 mmodule”mfe1@component”

如何在设计时使用远程暴露的组件

一个简单的 POC，我们有一个 react 应用程序host_ui作为主机和material_components远程。material_ui公开一个组件NavBar。

在主机中导入它会引发错误：

虽然如果我们只使用 NavBar 组件中的 html 效果很好。material-ui在模块联合中使用是否需要做一些额外的事情。

实际上这里的问题完全相同，但上下文不同： How to mock not installed npm package in jest?

我是从 webpack 使用新模块联合的项目的一部分。基本上，我有一个主机应用程序，它使用远程应用程序。我在这里为路由做同样的事情： https ://github.com/module-federation/module-federation-examples/tree/master/shared-routes2

我的主机应用程序导入远程应用程序的路由类似（我从模块联合存储库中获取了这个示例：https ://github.com/module-federation/module-federation-examples/blob/master/shared-routes2/app1/ src/App.js )

我的这个组件的测试文件如下所示：

该测试按原样产生错误：

我相信会发生此错误，因为实际上没有名为app2/routes. 它是由 webpack 模块联合插件生成的联合模块。但是，jest在模拟它之前寻找实际的模块。

这是我被卡住并且没有想法的部分。

任何建议高度赞赏。

更新：

Jest 提供虚拟模拟，它解决了我的问题。（我从这个答案中找到了解决方案：https ://stackoverflow.com/a/56052635/5018572 ）

完成后mocking factory，您只需传递{ virtual: true }选项并开玩笑停止抱怨模块的存在。

希望它对遇到同样问题的人有所帮助。

想就模块联合向您寻求帮助。我正在尝试从外部服务器设置远程，但从 remoteEntry 加载的脚本是使用容器 url 加载的。

在网络请求中，结果是：

http://localhost:8080/[somethingscript1].js http://localhost:8080/[somethingscript2].js

我正在尝试在我的 Angular 项目中使用 Module Federation Plugin，但出现此错误 -

我的项目需要两个 webpacks - webpack 5 用于模块联合插件和 webpack@4.44.2 用于 angular-devkit/build-angular@0.1102.3。

如何解决这个问题？如果你在 Angular 中使用过 Module Federation 插件，请告诉我。

我正在尝试在 NextJs 10 项目中开发微前端，如https://gist.github.com/jherr/dd10bc34448590a2661a0c6acbcc7e8a/revisions所述。但是，当我尝试在我的项目和带有示例https://github.com/jherr/wp5-nextjs-10.git的项目中运行它时，我收到以下错误：Error: Module Federation only works with Webpack 5

错误：模块联合仅适用于 Webpack 5

我使用的是 Windows 10，我的 Node 版本是 v14.12.0

我怎样才能解决这个问题？

这个ui: "ui@http://some.external.host/remoteEntry.js"语法在 ModuleFederationPlugin 的remotes属性中是什么意思。我知道 ui 项是从外部主机加载的，但是ui@在主机定义之前是什么意思？

我们正在使用纱线工作区，它可以按预期进行开发。

这是我们的目录结构

• 家长
  • 应用
    • 应用程序1
      • 包装.json
      • 节点模块
      • 源代码
    • 应用程序2
      • 包装.json
      • 节点模块
      • 源代码
    • 应用程序3
      • 包装.json
      • 节点模块
      • 源代码
    • 应用程序4
      • 包装.json
      • 节点模块
      • 源代码
  • 共享
  • 建造
  • 包.json
  • 节点模块

我们使用 webpack 模块联合在应用程序之间共享代码，同时也在共享目录中使用 webpack 别名（我们希望将一些代码捆绑在每个应用程序中）。

所有这些都非常适合开发，因为 yarn 工作区可以很好地管理依赖关系。

我们希望单独部署我们所有的应用程序，但我们在解决共享目录的 node_modules 依赖项时遇到了麻烦。Shared目录中的依赖项是从 Parent 级别的 node_modules 中选择的，而 App1 目录中的依赖项是从App1中的 node_modules或Parent中的 node_modules 中选择的

对于 App1 的部署，我们有以下选项。

解决方案 1。

a）在父级别安装所有依赖项（这将很难知道哪些依赖项属于哪个应用程序）。这也将强制App1构建在运行时服务器上的 Parent 内（对于 ssr，我们不捆绑 node_modules）。

b)通过取App1内部 package.json 和Parent1内部 package.json 的依赖交集，在Parent中动态生成 package.json

解决方案 2。

在App1和Parent中安装所有依赖项（这将捆绑重复的依赖项，并且不适用于我们使用 React 的用例）

解决方案 3。

在 App1 中安装所需的依赖项，并在Parent的node_modules 中为 Shared 中所需的依赖项创建一个符号链接

这些解决方案似乎都不理想。请建议是否有其他可能的解决方案来解决此问题，如果没有，您在上述共享解决方案中推荐的解决方案是什么。

当使用模块联合动态加载的应用程序关闭时，我们如何处理主机反应应用程序中的故障？我正在测试一个场景，我购买了模块联合应用程序并测试主机应用程序给出了这个错误，加载脚本失败错误：localhost/remoteentry.js。

这是一个真实的场景，其中可能导入的应用程序可能已关闭或出现问题。