外部包导出的 React & Webpack 渲染组件答案

【问题标题】：React & Webpack render component exported by external bundle外部包导出的 React & Webpack 渲染组件
【发布时间】：2018-07-05 00:05:47
【问题描述】：

我正在尝试使用在我的主 React 应用 (bundle B) 中的外部脚本 (bundle A) 中公开的 React 组件。

外部 React 'header' 组件 (bundle A) 通过 <script> 加载，并使用 Webpack expose-loader 作为全局窗口变量公开。

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

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

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

这确实开始运行组件代码，但因错误而崩溃：

未捕获的错误：元素引用被指定为字符串 (searchForm)，但没有设置所有者。你可能加载了多个 React 副本。

我正在尝试做的事情是否可行？如果可以，我怎样才能让我的组件呈现？

编辑：这种方法确实适用于仅呈现 <h1>test</h1> 的简单组件。 ref 的使用是破坏性的！

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

【问题讨论】：

我正在尝试做类似的事情。您是否可以在使用 expose-loader 的地方共享您的 webpack 配置。我添加了脚本标签以将我的外部组件作为脚本加载，但不确定如何在 webpack 中配置
我最后没有使用expose loader。 Bundle A 只是将组件分配给一个窗口变量，例如window.myComponent = MyComponentName。只要您的 Bundle A 在您的主应用程序包之前加载，您就可以引用该窗口变量并将其用作常规组件。我自己的应用程序在加载问题的情况下有检查/回退。
Tnx。发表评论后，我采用了同样的方法

【解决方案1】：

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

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

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

【讨论】：

我的插件的 webpack 配置肯定有 React 的外部设置。我通过删除字符串引用暂时让它工作，例如ref="pluginName" 来自我的插件组件，并将它们替换为 ref={pluginName => { this.pluginName = pluginName }}。在我的组件中访问 this.pluginName 而不是 this.refs.pluginName 似乎可以解决问题

【解决方案2】：

我个人没有遇到此错误，但您是否尝试过执行this page 中列出的任何修复？

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

【讨论】：

是的，已经看过了。还没有运气。为了回答您的观点，我们网站的几个部分由独立的节点应用程序组成，因此外部组件将在首次加载时被缓存。就传入 props 而言，每个应用程序对外部组件的使用非常少。我们需要在一个地方更新它的便利，而不是破坏某些东西的风险。我们有相当大的测试覆盖率来支持这一点。