使用共享的React库在同一页面中呈现多个Webpack入口点

如何解决使用共享的React库在同一页面中呈现多个Webpack入口点

我有一个React应用程序，我在Webpack配置中配置了多个入口点。

样品

const webpackConfig = {
entry: {
    A: "./app/activity/a.js",B: "./app/activity/b.js",C: "./app/activity/c.tsx",D: "./app/activity/d.tsx",},}

示例活动文件

import React from "react";
import { render } from "react-dom";
import { WidgetComponentA } from "../components/WidgetA";

render(
      <WidgetComponentA />,document.getElementById("widget-root-div")
);

在这里，我需要在小部件模型中呈现这些多个入口点，这些点必须一起呈现。

将它们一起渲染时，我面临以下问题

Invariant Violation: Minified React error #321
https://reactjs.org/docs/error-decoder.html/?invariant=321

我已验证自己没有违反任何钩子规则。

在渲染时，我看到如果我检查webpackjsonP的值，它将错过小部件入口点之一，即，本质上，如果订单是A和B，则只有B会渲染，但webpackJsonP只会有A如果顺序相反，反之亦然。

注意-有些入口点在JS中，有些在打字稿中。任何帮助将不胜感激。

经过进一步调查，发现只有当多个窗口小部件一起呈现时，问题才会与react-hooks有关。移至类组件已解决问题。尽管还无法确定根本原因。