通过外部捆绑包导出的React＆Webpack渲染组件

Question

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

外部的React'header'组件（Bundle）通过<script>加载，并使用Webpack Exposure -loader作为全局窗口变量公开 。

然后，我的网站将按以下顺序引用这些包：

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

然后，可以通过Main应用程序中的window.appHeaderBundle （包B）引用外部标头组件，例如

在我的主应用程序中，我尝试引用const Header = window.appHeaderBundle.default;类的组件const Header = window.appHeaderBundle.default; 然后在我的render()中将其用作纯jsx <Header /> 。

这确实开始遍历组件代码，但由于错误而崩溃：

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

我正在尝试做的事情是否可行？如果可以，如何使我的组件渲染？

编辑：这种方法确实适用于仅呈现<h1>test</h1>的简单组件。 ref的使用是令人震惊的事情！

---

其背后的想法是可以将外部捆绑包放入多个站点。 更新外部捆绑包将反映在所有站点中。 当前，每个站点都通过NPM加载它，但这要求每个站点在进行更改时都要提高版本号，因此为什么我不赞成这种方法。

Answer 1

我个人没有遇到此错误，但是您是否尝试过进行此页面上列出的任何修复？

根据您的解释，应该可以使用外部组件。 我不确定您使用外部捆绑软件而不是npm理由是否正确。

• 使用npm可以为该外部组件节省一个额外的HTTP请求。
• 当外部组件发生重大变化时会发生什么？ 如果该外部组件的用户不知道，则其Web应用程序可能会损坏。 使用npm可以防止这种情况。

Answer 2

该错误表明您具有不同的React副本。 您应该显示“插件”（外部组件）的Webpack配置。 在您评论的答案中 ，我解释了插件的webpack配置将React定义为外部。

这当然意味着您的主应用程序应该设置window.React = React在包含延迟加载的组件之前进行window.React = React ，以使其正常工作。 它们不应该再包含React本身，这违背了将单个React（或更常见的是vendor ）捆绑包和延迟加载的组件定义为完全独立的Javascript项目的目的。

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

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