Uncaught ReferenceError: ReactCSSTransitionGroup is not defined

react
1

Hi,
I’m new to meteor and react and so far I’ve really liked the experience. But now I’ve run into a problem I can’t seem to be able to solve on my own.

I’m trying to animate a component using ReactCSSTransitionGroup like described here. But I’m getting the following error:

Uncaught ReferenceError: ReactCSSTransitionGroup is not defined

But when I type in React.addons.CSSTransitionGroup into the console it is found, so it should be available, right? The only post regarding my problem that I found in this forum did not really help me.

2

Without showing some code, no one can help.

3

Check that you have the package installed with npm list react-addons-css-transition-group

Edit: I wouldn’t recommend trying this with Meteor 1.2 or earlier. Check what version you’re running with meteor --version
If you really want to use it with <=1.2, refer here: http://react-in-meteor.readthedocs.org/en/latest/client-npm/

If you’re using the meteor 1.3 betas, you can just do a npm i react-addons-css-transition-group --save to reference a client side package.

To install 1.3, meteor update --release 1.3-modules-beta.5, however, I don’t know if atmosphere packages will still work with this build.

4

Do you declare the ReactCSSTransitionGroup as a variable before using it?

5

Than you for your answer.
In what folder should I run npm list react-addons-css-transition-group? When I execute it in my home directory (the one where I run meteor) it doesn’t seem to find anything at all.

It seems like it was my fault for expecting Meteor to automatically include those react addons, the link I posted above made it seem like that was the case.

When I included the addon via browserify like suggested in the link you posted (I had already set that up for another npm package) it I was kind of able to get it to work. But now I’ve ran into another problem, whenever I visita a page that uses ReactCSSTransitionGroup it get the error

Error: 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).

So if I read that correctly there are now multiple versions of react loaded. To me it seems like it WAS already included and I just don’t know how to assign it to a variable or whatever the Meteor way of doing

ReactCSSTransitionGroup = require('react-addons-css-transition-group');

is.

6

Sorry, I can’t help you there, there are some other posts relating to the duplicate react issue. I opted to not fight those battles by going from webpack:webpack to 1.3, both of which support npm in a sane way.

So my package.json shows all my canonical npm dependencies and my .meteor/packages has all my meteor packages and I use it here.

7

So I guess waiting for 1.3 is probably the way to go. Thanks for your help.