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.
Without showing some code, no one can help.
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
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.
Do you declare the ReactCSSTransitionGroup as a variable before using it?
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');
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.
So I guess waiting for 1.3 is probably the way to go. Thanks for your help.