javascript - 外部包导出的 React 和 Webpack 渲染组件

Question

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

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

然后我的站点按以下顺序引用这些包:

1. React/ReactDOM 包
2. 外部 header 组件包 (包 A)
3. 主应用包(包 B)

然后可以通过window.appHeaderBundle 引用外部 header 组件。在主应用程序中 (bundle B) 例如

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

这确实开始运行组件代码，但因错误而爆炸:

Uncaught Error: Element ref was specified as a string (searchForm) but no owner was set. You may have multiple copies of React loaded.

我尝试做的事情是否可行？如果可行，我如何让我的组件呈现？

编辑:这种方法确实适用于只呈现 <h1>test</h1> 的简单组件。 . ref的使用是什么在破坏东西!

---

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

Answer 1

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

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

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

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