问题标签 [webpack-module-federation]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
angular - Angular、Nx Workspace、Webpack 5 Module Federation：您提供了一个无效的对象
我目前正在开发一个使用 Webpack 5 的 Module Federation 的项目。该项目包含 Angular 12 应用程序：一个应用程序是外壳，另一个是应加载到外壳中的远程。两个应用程序都运行良好，但在将远程导入 shell 应用程序时出现以下错误：
远程应用程序正在启动对 REST 和 GraphQL 接口的请求。似乎在执行请求并返回 observables 时发生错误。我的猜测是我的依赖项导致了问题。这些是我当前安装的依赖项：
我也尝试调整 Webpack 配置，但更改没有帮助。shell 和远程应用程序通过模块联合共享以下库：
完整的堆栈跟踪如下所示：
订阅方法返回的可观察对象时会发生错误：
这些是被调用的函数：
angular - 模块联合：如何拥有同一个 remoteEntry 文件的多个实例
我在 Angular 12 中使用了模块联合，并在下面的模式中集成了 GraphQL
- Child2：由暴露给其他 mfe 的两个不同模块（a 和 b）组成
- Child1：消耗Child2的module(a)中的1个并暴露自己的module
- Mfe_Parent：同时使用 Child1 和 Child2（带有模块（b））
为了克服缓存破坏，我使用时间戳作为查询参数以及
Parent Mfe_Parent 中的 remotePaths：
在 Child1 Mfe 中：
因此，使用这种方法，在构建时使用的时间戳“todayTs”将是相同的，并且只会创建一个 child2 的实例，Mfe_Parent 和 Child1 都将使用该实例。但是使用这种方法，如果 Mfe_Parent 有任何需要部署的更改，即使没有进行任何更改，我们仍然必须部署 Child1，否则，远程路径中的“todayTs”将不同，并且两个实例将是为 Child2 创建。由于创建了两个实例，GraphQL 无法从各自调用的 mfes 创建模块的两个不同实例。
是否有任何可能的配置或任何方式可以消除这种依赖关系，并且只能部署 Mfe_Parent 而不必总是部署 Child1。
reactjs - Gatsby Module Federation CORS 错误和急切消费问题
我正在尝试使用 gatsby 使用模块联合的微前端应用程序。当我尝试调用在 localhost:3001 上运行的组件时，出现 CORS 错误。知道如何解决这个问题吗？
这是我的gatsby-node.js
应用程序2idex.js
任何帮助表示赞赏。谢谢
css - Webpack：如何使用 MiniCssExtractPlugin 和多个块为主块构建单个 css 文件？
在我的 webpack 配置中，我有两个条目，“桌面”和“移动”。
根据文档：
https://webpack.js.org/plugins/mini-css-extract-plugin/#extracting-all-css-in-a-single-file
可以创建单个 css 文件，但是在我的项目中使用多个块 webpack 呈现的配置样式会引发多个警告，例如：
在我的项目中，我使用模块联合和引导文件，根据此文档页面创建： https ://webpack.js.org/concepts/module-federation/#troubleshooting
我的index.js文件看起来像：
另外，样式收集不正确，闪烁
我尝试更改 webpack 配置，例如：
但是使用该配置 webpack 会引发错误：
如何正确地将所有样式添加到主块中的单个文件？
angular - Angular 升级并添加模块联合插件后，浏览器未加载应用程序
我们添加了 Angular Module Federation 插件。添加构建成功后，但是当我们运行 ng serve 并尝试在浏览器中查看应用程序时出现以下错误
NPM 版本：6.14.13
角 CLI：12.1.4
节点：14.17.1
包管理器：yarn 1.22.10
操作系统：达尔文 x64
角度：12.1.4
打字稿：4.3.5
应用程序包.json 文件
webpack.config.js
任何帮助表示赞赏。
angular - Angular 微前端与 Angular 材料的联合
我正在创建一个角度远程应用程序，我想在其他应用程序中重用组件。为了做到这一点，我使用 angular 12 制作了一个测试项目，带有 angular 材料和模块联合。
除了使用有角材料的组件外，该应用程序运行良好，您可以在下面看到远程和外壳中的 UI。我还附上了组件的 html 实现。
我的远程用户界面
我的外壳界面
reactjs - 使用样式组件时，Webpack 模块联合因 Next JS 失败
我正在尝试让 Webpack Module Federation 与 NextJS 应用程序一起使用，其中联合模块使用样式化组件。如果我只使用 react 和 react-dom 但使用 styled-components 会给我这些错误，我的配置会按预期工作：
和
我尝试了通过修改主机和远程应用程序中的 Webpack 配置来将样式化组件解析为单个实例的不同方法，但似乎都失败了。
这是我当前的配置：
联合模块仓库（webpack.config.js）：
使用 NextJS 应用程序 Webpack 配置（next.config.js）：
webpack - webpack 模块联合 + vuejs 动态导入（）
我试图根据路由名称动态调用一些组件。我的组件来自远程模块联合，因此我需要保留该结构： import('module/Module') 除非有其他方法来定义它。
这是我的 webpack 配置
因此，如果我的路线是 localhost:8080/app/test，我想加载 test 或 test2
我尝试动态重写名称并在 import() 中使用它，但它不起作用。
我收到此错误：未捕获（承诺）错误：找不到模块“测试/测试”
（虽然模块名称是正确的......）
这有效：
看来我们不能在导入中使用动态名称。知道如何绕过这个问题吗？我想稍后也使用公开模块的动态列表，这就是我不想硬编码名称的原因。
vue.js - 使用 vue3 和 webpack 模块联合进行状态管理
我正在使用带有 Vuejs3 和 webpack 5 模块联合的 MFE 创建一个应用程序。使用 Vue 制作的一个主要应用程序将使用其他应用程序（应该与框架无关），我需要将状态从我的 Vue shell 共享到其他应用程序。
我尝试使用 Composition api 创建一个商店，但该值仅在调用该事件的应用程序中更新。
这是我从 vue shell 中公开的商店：
在 Vue 外壳中：
当我单击“FOO +1”按钮时，值会更新 +1。
在我的远程应用程序中：
当我单击按钮“BAR +5”时，值会更新 +5
但是每次我单击其中一个按钮时，另一个应用程序中的值都不会更新。
我错过了什么 ？
angular - 不是使用 Angular Module Federation Webpack 创建的 Angular 块文件
我正在按照以下链接使用 Angular Module Federation 创建 MFE。
https://github.com/benorama/mfe-basic-demo
运行项目后，
我可以看到在终端中生成了块文件，但是当我在文件资源管理器中看到时实际上没有文件，我找不到mfe1RemoteEntry.js
这是我的 webpack 文件，
请问有什么想法吗？