一页上的多个React Micro前端

Question

我们正在使用 nx 生成反应应用程序，然后我们将其用作微正面端。 以前，它们都被限制在分开的页面上，并完美无缺。

最近，我们添加了一个应用程序，该应用程序旨在包含在所有页面上（使用layout.cshtml），这会导致问题。 当在同一页面上渲染两个应用程序时，会发生两件事：

1. 第一个应用程序渲染，但没有事件（单击）触发，使其无法使用。
2. 第二个应用程序根本不会渲染。

在部署环境中的浏览器控制台中没有显示错误。

在尝试重现问题时，仅当在页面上多次包含运行时。

无效的挂钩呼叫。钩子只能在功能组件的主体内部调用。这可能是出于以下原因之一：1。您可能有不匹配版本的React和渲染器（例如React Dom）2。您可能会违反钩子的规则3。同一应用参见有关如何调试和解决此问题的提示。

这使我相信这是我们的问题，包括页面上多次反应。 我已经开始研究为应用程序添加对同行依赖性的反应。由于我们一直在package.json中的主要依赖项中加入了反应。但是，由于应用程序是完全分开的，因此我无法弄清楚它应该如何工作。

有没有办法做这项工作？我想象以某种方式将所有常见的依赖项添加到一个文件中，并在每个页面上都包含它，而不是将它们全部包含在每个应用程序中。

html：

...

<div id="app1"></div>

<script src="/dist/apps/app1/runtime.js" type="text/javascript"/>
<script src="/dist/apps/app1/polyfills.esm.js" type="text/javascript"/>
<script src="/dist/apps/app1/main.esm.js" type="text/javascript"/>

...

<div id="app2"></div>

<script src="/dist/apps/app2/runtime.js" type="text/javascript"/>
<script src="/dist/apps/app2/polyfills.esm.js" type="text/javascript"/>
<script src="/dist/apps/app2/main.esm.js" type="text/javascript"/>

...

Answer 1

当然，我在发布后不久找到了解决方案。
此处详细介绍了该问题：

tl; dr：在每个React应用中全球添加的WebPackJSonp对象，需要具有一个唯一的名称才能工作。

因此，我必须执行以下操作：

1. 添加一个自定义的webpack config（在这种情况下为webpack.extra.js）
2. 在workspace.json中的应用程序配置中，

。 workspace.json代码：

...
"app2": {
  ...
  "targets": {
    "build": {
     ...
     "options": {
       ...
       "webpackConfig": "apps/app2/webpack.extra.js"
     },
     ...

webpack.extra.js：

const { merge } = require('webpack-merge');

module.exports = (config, context) => {
  return merge(config, {
    output: {
      jsonpFunction: 'uniqueAppName',
    },
  });
};