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

Reply via email to