Transition group import problem

[jondlm]

We recently encountered a strange bug where one of our users with webpack ran into the dreaded Only a ReactOwner can have refs error when importing the Banner component. After further investigation, we found that the problem was with react-addons-css-transition-group and the way it imports react.

Turns out that react-addons-css-transition-group is simply a pointer back to the react repo. For some reason during transpilation (or something) it's turning that into require('./React') which webpack considers a different modules than regular react. Ultimately this can lead to multiple copies of react being imported in our client libraries.

We found a temporary fix which was to add the following line to the externals section of the webpack config:

externals: {
  'react': 'React',
  'react-dom': 'ReactDOM'

  // to avoid duplicate import of React with react-addons-css-transition-group
  './React': 'React',
  './ReactDOM': 'ReactDOM'
},

I'm not sure how to fix this. I wonder if part of the problem is that we're requiring transition groups as a regular dependency instead of a peer dep.

[tarun]

Just noticed this happens with ReactDOM too inside ReactCSSTransitionGroupChild
I believe it is triggered by Dialog
My fixed externals block no looks like..

externals: {
    'bluebird': 'Promise',

    'react': 'React',
    'react-dom': 'ReactDOM',

    // to avoid duplicate import of React with react-addons-css-transition-group
    './React': 'React',
    './ReactDOM': 'ReactDOM'
}

[jhsu]

This is because react is being used as an external.

if you want to use it as an external, you need to include react with addons and and map react-addons-css-transition-group to React.addons.CSSTransitionGroup.

see: facebook/react#6343

[strunkandwhite]

https://jira.corp.appnexus.com/browse/ANXR-381

[jondlm]

We might be able to do away with transition group in favor of react-motion that is coming with the graphs work.

[jondlm]

Leaving this ticket around because we want to move away from css transition group

[alisonailea]

React.addons.CSSTransitionGroup has been depreciated in favor of https://github.com/reactjs/react-transition-group which is now being actively maintained and solves many of these problems