Meteor + React - unable to access jQuery in React component

1

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');
                break;
            case 'down':
                $el.slideDown('animationDuration: 400');
                break;
            default:

        }
    }
},

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!
[1]: http://stackoverflow.com/questions/33087644/meteor-react-component-unable-to-reference-jquery

2

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

3

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

4

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

5

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.

6

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!

7

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.

8

Oh darn, we should certainly update that README.

9

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

10

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

1 Like
11

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.

12

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