CODEWITHSUNDEEP
javascriptnode.jsreactjswebpack
tctc91
tctc91

Reputation: 1363

React & Webpack render component exported by external bundle

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.

enter image description here

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.

Upvotes: 2

Views: 2018

Answers (2)

CharlieBrown
CharlieBrown

Reputation: 4163

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.

Upvotes: 1

Anthony N
Anthony N

Reputation: 972

I haven't ran into this error personally, but have you tried doing any of the fixes listed on this page?

From your explanation, the way you're using your external component should be possible. I'm not sure that your reasoning for using an external bundle instead of npm is good.

  • Using npm would save an extra HTTP request for this external component.
  • What happens when the external component has breaking changes? If the user of this external component doesn't know about it, their web app might break. Using npm would prevent this.

Upvotes: 1

Related Questions