jQuery and Underscore not loading in RequireJS

Question

I'm fairly new to Backbone and just started trying to learn AMD today. I installed the RequireJS-jQuery library from RequireJS's website. So this is my script tag, which has Laravel path calls in it:

<script data-main="{{ path('js/main') }}" 
src="{{ path('js/libs/requirejs/require-jquery.js') }}"></script>

I'm trying to make sure everything loads correctly, so I'm trying to console.log my dependencies. Backbone returns an object just fine. Underscore and jQuery do not. Here is my main.js file:

  require.config({
    baseUrl: '../js/',
    paths: {
        jquery: 'libs/jquery/jquery-1.8.3.min',
        underscore: 'libs/underscore/underscore-min',
        backbone: 'libs/backbone/backbone-min'
    }
});

if ( typeof define === "function" && define.amd && define.amd.jQuery ) {
  define( 'jquery', [], function () { return jQuery; } );
}

//the "main" function to bootstrap your code
require(['jquery', 'underscore', 'backbone', 'app'],
    function () {  
        var App = require('app');
        //App.initialize();
        console.log($);
        console.log(_);
        console.log(Backbone);
});

I have a couple of questions, do I need the path for jQuery, since it's part of the RequireJS-jQuery library? Two, what is this about shimming? Do I need to shim this to get it work? I'm using v 2.1.4 of RequireJS-jQuery.

I tried following this post but couldn't get it working. I'm using AMD versions of Backbone and Underscore. Why won't Underscore and jQuery console.log?

When I say they won't console.log what I mean is that it returns `function()` — sehummel, Jan 24 '13 at 19:57

Nirvana Tikku · Accepted Answer · 2013-01-24T20:27:59.577

2

When requiring any file via require.js, it must conform to the standard AMD definition in order for the IIFE to have an argument defined.

For example, in the jQuery library, they have added an export definition:

if ( typeof define === "function" && define.amd && define.amd.jQuery ) {
  define( "jquery", [], function () { return jQuery; } );
}

Which allows you to reference $ in the IIFE.

Shimming adds an export definition (similar to what jQuery has above), so if you wanted to you could have _, $ and Backbone point to the appropriate references... but personally, instead of relying on the arguments, I just rely on the evaluation globally, setup necessary shims for dependencies and otherwise, for all my own modules (where I do define each file as an AMD module), I use the inline require definition.

For example:

require(['jquery','underscore','backbone', 'my-module'],function(){
    var MyModule = require('my-module');
});

Hopefully the above made sense.

~ Based on your code above, try:

require(['jquery', 'underscore', 'backbone', 'app'],
    function () {  
        var App = require('app');
        //App.initialize();
        console.log($);
        console.log(_);
        console.log(Backbone);
});

edited Jan 24 '13 at 20:27

answered Jan 24 '13 at 20:10

Nirvana Tikku

4,105
1
20
28

I tried that and it didn't seem to work. jQuery is still not console.logging. – sehummel Jan 24 '13 at 20:16
Well, my point was more so, instead of relying on the argument definitions in the anonymous function, use the inline definitions, and assume that the modules have been loaded. i.e. get rid of `function ($, _, Backbone, App)` and instead, assign App using an inline require definition of your 'App' i.e. `require('app')` and $ or jQuery should exist since you have required it. – Nirvana Tikku Jan 24 '13 at 20:19
Can you edit my code to show me what you mean, I don't seem to be getting it. – sehummel Jan 24 '13 at 20:27
That's what I thought. I'm still not getting jQuery or Underscore. – sehummel Jan 24 '13 at 20:30
Could there be something else going on? – sehummel Jan 24 '13 at 20:30
Any chance you have a fiddle? – Nirvana Tikku Jan 24 '13 at 20:31
Maybe I don't have the AMD version of Underscore like I thought. – sehummel Jan 24 '13 at 20:32
Can't be sure this is it but: I'm noticing that you don't have a `baseUrl` defined, and in the data-main definition you have `js/main`.. I assume you want js/lib for your libraries, right? if so, provide a `baseUrl` of '`js/`' to your require.config (this is because you've included lib/ in the definitions. Alternatively, you could have the baseUrl set to `js/lib/` and then ignore lib/, but it depends on how your files are structured. `js/` is more likely than not what you'll want to use) – Nirvana Tikku Jan 24 '13 at 20:37
Now we're getting somewhere. It's not even finding the files. – sehummel Jan 24 '13 at 20:38
OK, I think I can take it from here. Thanks @Nirvana. – sehummel Jan 24 '13 at 20:40
When you say 'still doesn't work' -- are you seeing jQuery/Underscore get loaded properly (via devtools)? – Nirvana Tikku Jan 24 '13 at 20:50
No I am not. I can't call them from the command line in the browser either. – sehummel Jan 24 '13 at 20:51
This comment thread is getting long :) Any chance you could update the post with the changes you've made? (also, suffice it to say that your main.js is getting loaded properly, yes?) – Nirvana Tikku Jan 24 '13 at 20:52
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/23342/discussion-between-sehummel-and-nirvana-tikku) – sehummel Jan 24 '13 at 20:54

jQuery and Underscore not loading in RequireJS

1 Answers1