Loading multiple copies of React in the same page creates problems <https://reactjs.org/warnings/refs-must-have-owner.html#multiple-copies-of-react>, 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 <http://wso2.com/signature>
_______________________________________________ Dev mailing list Dev@wso2.org http://wso2.org/cgi-bin/mailman/listinfo/dev
