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 <sajit...@wso2.com>
wrote:

>
>
> 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>
>



-- 
*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