React: [bug] Invariant Violation when using with react-addons-transition-group

[rochej]

I’m working on a Rails project that uses the react-rails gem. We have React 15.1.0 and a pre-made modal component that requires react-addons-transition-group 15.0.1 (among other things). When the modal loads, I get the following error:

Uncaught Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner)

When I try to close the modal I get this error:

Uncaught TypeError: Cannot read property 'componentWillEnter' of undefined

I’m not having any trouble using React in other components. I’ve already deleted and reinstalled my node_modules folder. Is this a known issue? Any tips?

I've already reviewed the following resources and attempted to debug per their suggestions, to no avail:
https://gist.github.com/jimfb/4faa6cbfb1ef476bd105
https://github.com/facebook/react/issues/1457
https://groups.google.com/forum/#!topic/reactjs/sJaIoLSQCSQ
https://github.com/facebook/react/issues/4876

[aweary]

@rochej can you provide a jsfiddle with a reproducible case? It sounds like the addComponentAsRefTo(...) error is causing the second TypeError.

[gaearon]

Uncaught Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner)

This sounds like you have a duplicate React in the bundle. Please run npm ls react and check if you have more than one.

[gaearon]

Note that just running npm ls react may not be enough. Maybe your modal component bundles an additional React by mistake. The best way to tell is to inspect the bundle and to look for some string like var ReactReconciler = { in the compiled bundle. If you see it more than once, you have a duplicate React.

Unfortunately we won’t be able to help diagnose the issue further unless you can provide an example reproducing it.

[rochej]

Thanks, all. It was a duplicate copy of React buried in the component.

[gabrielalan]

@gaearon I have this same error, but I've checked and dont have duplicated react. Besides this, I've made other test. If I ONLY require ReactCSSTransitionGroup, this error dont shows up, but if I use the component ReactCSSTransitionGroup inside my component, then the error is throwed ...addComponentAsRefTo...

So, what can I do???
Thanks.

EDIT: I'm using almost the same example of https://facebook.github.io/react/docs/animation.html.