反应& Webpack渲染由外部bundle导出的组件 [英] React & Webpack render component exported by external bundle

问题描述

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

外部React'标题'组件（包A）通过< script> 加载并使用Webpack

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

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

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

我正在尝试做什么，如果是这样我怎么能让我的组件渲染？

编辑：这种方法适用于只渲染< h1> test<的简单组件/ H1> 。使用 ref 就是破坏的事情！

---

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

解决方案

错误说你有不同的React副本。您应该显示插件（外部组件）的webpack配置。在回答你评论中，我解释说插件的webpack配置定义为React为外部。

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

https：// webpack。 js.org/configuration/externals/

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

I'm trying to consume a React component that's exposed in an external script (bundle A) within my main React app (bundle B).

The external React 'header' component (bundle A) is loaded via a <script> and exposed as a global window variable using the Webpack expose-loader.

My site then references the bundles in the following sequence:

1. React/ReactDOM bundle
2. External header component bundle (bundle A)
3. Main app bundle (bundle B)

The external header component can then be referenced via window.appHeaderBundle within the Main app (bundle B) e.g.

Inside my main app, I tried referencing the component like const Header = window.appHeaderBundle.default; and then in my render() using it as plain jsx <Header />.

This does start to run through the component code but blows up with the error:

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

Is what I'm trying to do possible and if so how can I get my component to render?

EDIT: This approach does work with a simple component that just renders <h1>test</h1>. The use of ref is what's breaking things!

---

The idea behind this is that the external bundle can be dropped into multiple sites. Updating the external bundle would then be reflected in all sites. Currently each site loads it via NPM but this requires each site to bump up the version number when a change is made hence why I'm going down this approach.

解决方案

The error says you have different copies of React. You should show your webpack configuration for the "plugin" (the external component). In the answer you commented on, I explained that the webpack configuration for the plugins defined React as being external.

This means of course that your main app should set window.React = Reactbefore the lazy-loaded components are included, in order for them to work. They shouldn't include React themselves again, that defeats the purpose of having a single React (or more generally a vendor) bundle and lazy-loaded components defined as a completely separate Javascript project.

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

The error is weird, but it smells like you're not doing this, and thus the Header bundle is including its own copy of React.

这篇关于反应& Webpack渲染由外部bundle导出的组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！