On Tue, Feb 20, 2018 at 9:47 AM, Nisala Nanayakkara <[email protected]> wrote:
> Hi Sajith, > > No. I think what we are going to do here is to refer the 'React' which is > initialized by the dashboard parent app from the widget level. So setting > the React in global context(global.React = React) should be done in the > Dashboard parent app. > +1, even better > So that we can refer it from widgets by using 'externals' in the webpack > config. > We need to document this (putting React as an external dependency and using global.React). Is there any docs ATM? > Thanks, > Nisala > > On Tue, Feb 20, 2018 at 9:09 AM, SajithAR Ariyarathna <[email protected]> > wrote: > >> 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 <[email protected]> >> 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 <[email protected]> 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 >>>> [email protected] >>>> http://wso2.org/cgi-bin/mailman/listinfo/dev >>>> >>>> >>> >>> >>> -- >>> *Nisala Niroshana Nanayakkara,* >>> Software Engineer >>> Mobile | +94 717600022 >>> WSO2 Inc | http://wso2.com/ >>> >>> _______________________________________________ >>> Dev mailing list >>> [email protected] >>> http://wso2.org/cgi-bin/mailman/listinfo/dev >>> >>> >> >> >> -- >> Sajith Janaprasad Ariyarathna >> Senior Software Engineer; WSO2, Inc.; http://wso2.com/ >> <https://wso2.com/signature> >> > > > > -- > *Nisala Niroshana Nanayakkara,* > Software Engineer > Mobile | +94 717600022 > WSO2 Inc | http://wso2.com/ > -- Sajith Janaprasad Ariyarathna Senior Software Engineer; WSO2, Inc.; http://wso2.com/ <https://wso2.com/signature>
_______________________________________________ Dev mailing list [email protected] http://wso2.org/cgi-bin/mailman/listinfo/dev
