Scripts Dependencies Using RequireJS Shim

Question

I'm upgrading from jQuery 1.8 to 1.9 and since jQuery.browser() is removed, I will use jQuery Browser Plugin.

My requirejs config file (loaded using data-main="") looks somewhat like this:

(EDITED - added more code snippets)

main-comp.js

require.config({
    paths: {
        jquery: 'libs/jquery/jquery1.9.1.min',
        utils: 'modules/utils',
        myController: "controllers/myController",
        browserPlugin: 'libs/jquery/jquery.browser.min'
    },
    shim: {
        browserPlugin: {
            deps: ['jquery']
        }
    }
});

require(['myController', 'jquery'], function (controller, $) {
        $(controller.start);
    }
);

moduls/utils.js

define(['browserPlugin'], function () {
    return {
        browser: $.browser
    };
});

myController.js

define(['utils'], function (utils) {
    function start() {
        console.log(utils.browser.msie)
    }
    return {
        start: start
    };
});

Everything seemed to work properly, but then I saw that sometimes in IE only I get a 'jQuery' is undefined (it's a capital Q there) or '$' is undefined errors from the jquery.browser.min.js file.

I thought the deps means that jquery will load before the jquery.browser file but apparently this isn't always the case. I tried following this answer and add exports: "$.fn.browser" but with no success.

When running an optimized version (minify+uglify using r.js) I haven't encountered it.

What am I doing wrong?

Answer 1

You need to ensure you reference $ as a parameter in the require callback. Like so:

require(['myController', 'jquery'], function (controller, $) {
        $(controller.start);
    }
);

This ensures that jQuery is available to use. It is a bit of an odd one as it will expose itself globally anyway so it will sometimes work regardless, but the correct way is to explicitly require it and use it inside the callback as a parameter.