Hi Nisala, global.React = React > Can we do above in the parent Widget ( https://www.npmjs.com/package/@wso2-dashboards/widget)? So that the some widget author doesn't need React as a dependency.
On Thu, Feb 15, 2018 at 1:22 PM, Nisala Nanayakkara <nis...@wso2.com> wrote: > Hi Aruna, > > +1 for the approach. We have faced a similar issue in Product SP and > tested the above-mentioned fix in our local environment. It is working fine. > > Thanks, > Nisala > > On Thu, Feb 15, 2018 at 12:04 PM, Aruna Herath <aru...@wso2.com> wrote: > >> 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 >> >> > > > -- > *Nisala Niroshana Nanayakkara,* > Software Engineer > Mobile | +94 717600022 > WSO2 Inc | http://wso2.com/ > > _______________________________________________ > Dev mailing list > Dev@wso2.org > http://wso2.org/cgi-bin/mailman/listinfo/dev > > -- Sajith Janaprasad Ariyarathna Senior Software Engineer; WSO2, Inc.; http://wso2.com/ <https://wso2.com/signature>
_______________________________________________ Dev mailing list Dev@wso2.org http://wso2.org/cgi-bin/mailman/listinfo/dev
