Hi Sajith, We need to document this (putting React as an external dependency and using > global.React). Is there any docs ATM? >
No. We do not add this to document yet. We need to improve the documents related "Creating Custom Widgets"[1] with this change. [1] - https://docs.wso2.com/display/SP400/Creating+Custom+Widgets Thanks, Nisala On Tue, Feb 20, 2018 at 10:14 AM, SajithAR Ariyarathna <[email protected]> wrote: > > > 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> > -- *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
