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. So that we can refer it from widgets by using
'externals' in the webpack config.

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/
_______________________________________________
Dev mailing list
Dev@wso2.org
http://wso2.org/cgi-bin/mailman/listinfo/dev

Reply via email to