4

Well, I used to do some job in ReactJS with ES3 syntax. Now I'm trying my best with ES6 one but I can't simply use ReactCSSTransitionGroup, due to absolutely mad error that says

Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. This usually means that you're trying to add a ref to a component that doesn't have an owner (that is, was not created inside of another component's 'render' method). Try rendering this component inside of a new top-level component which will hold the ref.

What is that?

    import React from 'react';
    import ReactCSSTransitionGroup from 'react-addons-css-transition-group';

    render(){
     return <ReactCSSTransitionGroup transitionName={transitions}>
      <Content/>
    </ReactTransition> 
    }
Shiroo
  • 666
  • 4
  • 11

1 Answers1

4

My issue was that I was using the external setting in my webpack config to exclude react and react-dom so that I could include them separately but react-addons-css-transition-group seems to reference react through a non-standard route and so the reference was not getting externalised properly.

I changed approach to using Webpack's vendor bundle approach with react, react-dom and react-addons-css-transition-group in the vendor bundle and that seems to work for me.

MichaelJones
  • 1,336
  • 2
  • 12
  • 22
  • Did you get to figure out what's wrong with how `react-addons-css-transition-group` requires `react`? It still happens in v15.4... – ShlomiTC Feb 16 '17 at 20:53
  • It has been a while but I think that the issue is that it uses an internal require path as it is itself in the `react` module. It doesn't do `require('react')`. I think that the `react-addons-css-transition-group` code is shipped inside the `react` module. The `react-addons-css-transition-group` just exports the right bit from within react. I think that's right. – MichaelJones Feb 17 '17 at 11:11