Loading multiple copies of React in the same page creates problems
such as errors with discriptions like "Element ref was specified as a
string (myRefName) but no owner was set. You may have multiple copies of
React loaded."

In our dashboards, we have widgets that can be added by dragging and
dropping. Since it should be possible to add widgets without building the
whole app, widgets are bundled separate to the parent app. How ever this
means react is bundled with both the widget and the parent app.

Adding react as a peerDep doesn't resolve this, as peerDeps only makes
sense if we add the widget as a dependency of the parent app and build the
parent app only.

To resolve this something we can do is to export React to the global scope
and allow widgets to use this global reference to React. So we don't have
to bundle React with widgets.

To put React into global context in the parent dashboard app we can do,

import React from 'react'
global.React = React

in the widget to use this global React ref instead of bundling use webpack
externals <https://webpack.js.org/configuration/externals/>.

webpack config should be,

externals: {
  react: 'React'

Instead of the variable name 'React' we can even use some other name like
'CarbonDashboardReactGlobalRef' to avoid  possible conflicts.

Aruna Herath
Senior Software Engineer | WSO2
Mobile: 0711 051 799 | 0774 569 555

Dev mailing list

Reply via email to