On Tue, Feb 20, 2018 at 9:47 AM, Nisala Nanayakkara <nis...@wso2.com> 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 <sajit...@wso2.com>
> 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 <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>
>>
>
>
>
> --
> *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
Dev@wso2.org
http://wso2.org/cgi-bin/mailman/listinfo/dev

Reply via email to