RequireJS and jQuery plugin

Question

I'm starting with RequireJS and I'm experiencing an issue with jquery plugin loading. Basically, when the plugin loads, it doesn't have jQuery in it's context, though I made a shim explaining it in my config. From what I have already seen, it seems to be the right way to load plugins that don't have AMD definition, I don't understand why it doesn't work in this case.

Here is my code :

require.config({
    paths: {
        "angular-mocks": "lib/angular-mocks/angular-mocks",
        "angular-route": "lib/angular-route/angular-route",
        "angular": "lib/angular/angular",
        "angular-scenario": "lib/angular-scenario/angular-scenario",
        "jquery": "lib/jquery/jquery",
        "bootstrap": "lib/bootstrap/docs/assets/js/bootstrap",
        "requirejs-text": "lib/requirejs-text/text",
        "less" : "lib/less/dist/less-1.4.2"
    },
    baseUrl: '/static/js',
    shim: {
        'angular' : {'exports' : 'angular'},
        'angularRoute': ['angular'],
        'angularMocks': {
            deps:['angular'],
            'exports':'angular.mock'
        },
        "bootstrap": ['jquery']
    },
    priority: [
        "angular"
    ],
    urlArgs: 'v=0.1'
});


require(['jquery', 'bootstrap'], function($){
    console.log($);
});

When I do the console.log, I have access to jQuery, but I have an error about the bootstrap loading : Uncaught TypeError: undefined is not a function

Unless you're loading an old version of jQuery, you don't need a shim for it. (Look in the jQuery code, you'll see that jquery calls define if it detects an AMD-compatible environment, which RequireJS is.) I don't think this is the source of your problem though. — Louis
I have seen people using it, saying it could resolve some issues, but it's indeed not the source of my problem. I still have the issue when I delete it. I will remove it from my post, so it doesn't troubles other people. — Raphaël Boucher
Your shims for angular-route and angular-mocks are wrong. You must refer to them in the same way you set them in paths otherwise RequireJS is not going to shim them. This does not explain why there would be a problem with bootstrap. — Louis

Raphaël Boucher Raphaël Boucher · Accepted Answer · 2013-12-04T21:34:52

I was using Django Debug Toolbar in parallel with require, and it appears that it's loading it's own version of jQuery, messing up the order of script loading.

I removed the toolbar for now, and it's working!

RequireJS and jQuery plugin

1 Answers