微前端项目导致实时服务器重新加载后超出最大调用堆栈大小

Question

我使用 NX 创建了 Angular 15 Micro 前端项目。第一次使用“nx服务主机--devRemotes=remote”运行时一切正常我有一个主机项目和一个远程项目。当我尝试修改代码并且发生 Web Pack 服务器实时重新加载时，我收到超出最大调用堆栈大小的消息，并且浏览器显示空白页面。我在微前端项目中共享了库。我已经为此努力了很多天，任何见解或帮助都值得赞赏。

我需要摆脱最大调用堆栈大小超出错误，这样我就可以在修改代码和实时重新加载后看到 UI 渲染。

异常

main.ts:1 RangeError: Maximum call stack size exceeded
at main.js:894:55
at Array.forEach (<anonymous>)
at __webpack_require__.f.consumes (main.js:877:35)
at ensure chunk:6:1
at Array.reduce (<anonymous>)
at __webpack_require__.e (ensure chunk:5:1)
at Object.get (main.js:418:559)
at get (main.js:558:25)
at getStrictSingletonVersion (main.js:528:19)
at main.js:611:19

Answer 1

我自己也遇到过这个问题，解决方案是检查我的共享库，并确保每当它们从自己导入时，它们都使用相对路径（IE import { ServiceOne } from '../../service-one/service- one.ts'）而不是使用 tsconfig 中定义的路径导入（IE import { ServiceOne } from '@lib-one'）