Meteor + React - unable to access jQuery in React component


I am trying to migrate a React component, written outside of Meteor, to run inside Meteor. I posted this question also on [StackOverflow][1]

The problem I have is that jQuery ($) is not defined. I fully understand that the use of jQuery is not necessary in a lot of cases and is even frowned upon within React. That being said, Meteor currently installs jQuery by default. Being able to use jQuery for animations will help me overcome a limitation of React’s ReactTransitionGroup and ReactCSSTransitionGroup components. I can not simply add a link to jQuery CDN because that would cause jQuery to be loaded twice! Once from the CDN and once inside Meteor.

My problem is that I don’t know how to access Meteor’s jQuery from within a React component.

Here is a snippet of one of my components:

componentWillReceiveProps: function(nextProps) {
    if (nextProps.slideDirection !== this.props.slideDirection) {
        this.setState({ slideDirection: nextProps.slideDirection })
        var $el = $(this.getDOMNode());
        if (nextProps.slideDirection.trim() === 'down') { console.log('= down'); } else { console.log('!= down'); }
        switch (nextProps.slideDirection.trim()) {
            case 'up':
                $el.slideUp('animationDuration: 400');
            case 'down':
                $el.slideDown('animationDuration: 400');


I have really struggled with this all weekend. I “really” want to be able to use jQuery in this case for the animation effect. I am trying to animate the DIV height expansion along with visibility of the body text. This is easily achieved with jQuery’s slideup and slidedown. Any help is much appreciated!


This should work! Can you post your entire app? It’s possible that something is going on which is not covered in this post.


Thanks you so much for your reply Sashko! I will update my Github repo shortly.


I am offsite and I will update the Github repo asap. Many thanks to you again!


My github repo contains the problem with jQuery in this component:
Please excuse my code, it has rough edges and is not polished. I’m working on a prototype based on your “awesome” mui-leaderboard example. Again, I am very grateful for any help or insight.


There’s your problem :]

That app doesn’t have jquery, mostly to demonstrate that you can build a Meteor app without jQuery.

Add it with meteor add jquery!


Wait a second! :smile: I know about that atmosphere package, but, it clearly says “This package is automatically included in every new Meteor app by meteor create.”. That is why I didn’t add it.


Oh darn, we should certainly update that README.


That fixed it. God bless you! I know now to add that package :blush:


One last note: you guys are AWESOME! I mean it, Meteor rocks and your level of commitment is inspiring.


Oh wait - that README is correct - the difference is, you didn’t use meteor create to make your app. You cloned an app where it was removed.


Ahhhhhhh … super sleuth! That is indeed correct. Very good catch!