反应＆amp; Webpack渲染由外部bundle导出的组件

Question

我尝试使用在我的主React应用（捆绑B）中的外部脚本（捆绑A）中公开的React组件

外部React＆＃39;标题＆＃39; component （bundle A）通过<script>加载，并使用Webpack expose-loader公开为全局窗口变量。

我的网站然后按以下顺序引用捆绑包：

1. React / ReactDOM捆绑包
2. 外部标头组件包（包A）
3. 主要应用包（捆绑B）

然后可以通过主应用（捆绑B）中的window.appHeaderBundle引用外部标头组件，例如



在我的主应用程序中，我尝试引用类似const Header = window.appHeaderBundle.default;的组件，然后在我的render()中使用它作为普通的jsx <Header />。

这确实开始运行组件代码，但会出现错误：

  

未捕获错误：将元素引用指定为字符串（searchForm），但未设置所有者。您可能已经加载了多个React副本。

我正在尝试做什么，如果是，我怎样才能让我的组件呈现？

编辑：此方法适用于只呈现<h1>test</h1>的简单组件。 ref的使用正在破坏事物！

这背后的想法是外部捆绑可以放入多个站点。然后，更新外部包将反映在所有站点中。目前，每个站点都通过NPM加载它，但这需要每个站点在进行更改时提高版本号，从而为什么我要采用这种方法。

Answer 1

我个人没有遇到此错误，但您是否尝试过this page上列出的任何修补程序？

根据您的解释，您应该可以使用外部组件的方式。我不确定你使用外部包而不是npm的推理是好的。

• 使用npm可以为此外部组件保存额外的HTTP请求。
• 外部组件发生变化时会发生什么？如果此外部组件的用户不知道它，他们的Web应用程序可能会中断。使用npm会阻止此操作。

Answer 2

错误说你有不同的React副本。您应该显示＆＃34;插件＆＃34;的webpack配置。 （外部组件）。在answer you commented on中，我解释说插件的webpack配置将React定义为外部。

这当然意味着您的主应用应该在包含延迟加载的组件之前设置window.React = React，以便它们可以工作。他们不应该再次包含React，这会使单个React（或者更常见的是vendor）捆绑包和延迟加载的组件被定义为一个完全独立的Javascript项目。

https://webpack.js.org/configuration/externals/

错误很奇怪，但它闻起来像你没有这样做，因此Header包中包含了自己的React副本。