react-addons-transition-group creates multiple copies of React

[ajainarayanan]

Scenario:

• Have a react library & my own code that is using react-addons-transition-group
• During webpack build process React gets bundled twice (I am including react in my webpack build process and react-addons-transition-group which does require('react/lib/ReactTransitionGroup'))
• Apart from increased build size this is fine in webpack build process

However when I try to use the react component that I built in another project (angular project using ngReact) where I load React globally for ngReact library, it creates an issue as there are multiple copies of React refs-must-have-owner

Problem:

It now comes down to which React I am using. The one I have globally or the one that gets bundled with react-addons-transition-group?

Has anybody else encountered this issue? Is there a workaround? Is there a plan to make react as peer dependency(and not require it directly)? I'm sure that will be a major change but asking it anyways. Please correct me if I have mis-understood the problem in anyways.

PS:

Sorry about the previous issue, accidentally hit ENTER and github created the issue.

[gaearon]

If the versions of React and the addon match, after deleting node_modules and running npm install you shouldn't get an extra copy of React. npm should just leave the top level React in the module tree.

Is that not the case for you?

[ajainarayanan]

@gaearon Yes that is the case but when using webpack to bundle my component I leave React out (as an external) and just bundle react-addons-transition-group as part of my lib file. And when using this component in an angular project I load React separately (the same React from the node_modules folder).

The problem however(I am guessing) comes from the fact that react-addons-transition-group just requires a specific react/lib file and that gets bundled separately and I am loading react as a library separately (a requirement as part of the ngReact library). Now there are two versions of react (atleast two versions of function attachRefs function that I have noticed). Hope I am making some sense here

I am trying to create a fiddle to see if I can communicate in a more clear way.

[ajainarayanan]

TL;DR -

@gaearon This issue & this solution seemed to work for me.

Longer version:

Issue:

The issue is react-addons-transition-group and react-addons-css-transition-group seemed to be using internal APIs of react and if somebody is using this in writing a custom library and define react as external then there is essentially two copies of react (one from the require in react-addons-transition-group and the other is the external reference of react). This causes issue while using the custom library with external react.

Solution:

Declare both react-addons-transition-group and react-addons-css-transition-group as external dependencies in the custom library and use react-with-addons.js as the external react source.

[gaearon]

Yeah, we don't have a good story around UMD bundles referencing addons right now. The plan is to decouple addons completely and then perhaps hand them over to the community because we don't actively maintain them anyway.

[grahamvo]

@ajainarayanan I've been having this same problem, but adding react-addons-css-transition-group to my external dependencies hasn't helped. I'm confused about what react-with-addons.js is referencing. I'm probably just overlooking something small, but some help would be appreciated.

[ajainarayanan]

@grahamvo react.js comes with react alone and react-with-addons.js packages react along with the necessary add-ons. So if you are packaging react-addons-css-transition-group as external dependency in your library you want to use react-with-addons.js in a project where you are using your library. Hope this helps

[lishengzxc]

I have also encountered the same problem.
As @ajainarayanan pointed out, I adjusted the webpack.config.js and index.html:

// webpack.config.js
config.externals = {
  'echarts': 'echarts',
  'react': 'React',
  'react-dom': 'ReactDOM',
  'react-router': 'ReactRouter',
  'react-addons-transition-group': 'var window.React.addons.TransitionGroup',
  'react-addons-css-transition-group': 'var window.React.addons.CSSTransitionGroup',
  'react/lib/ReactTransitionGroup': 'var window.React.addons.TransitionGroup',
  'react/lib/ReactCSSTransitionGroup': 'var window.React.addons.CSSTransitionGroup',
  'history': 'History'
};

<!-- index.html -->
<script src="your cdn/react-with-addons.min.js"></script>
<script src="your cdn/react-dom.min.js"></script>
<script src="your cdn/ReactRouter.min.js"></script>

This solves the problem