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?

Simon Smith · Accepted Answer · 2013-08-15 10:52:31Z

2

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.

answered Aug 15, 2013 at 10:52

Simon Smith

8,0442 gold badges32 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Haji Over a year ago

Thanks but unfortunately it didn't help and I'm still getting these error (on IE, not always). I'm editing my question to give more details.

ekeren · Accepted Answer · 2013-08-20 16:04:04Z

1

It looks like you are missing jquery dependency in moduls/utils.js, please try:

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

and also, just to be on the safe side, add jquery to your shim :

jquery: {
  exports: "$"
},

By the way, why don't you use $.browser in your code and just load the jquery plugin using the shim configuration?

answered Aug 20, 2013 at 16:04

ekeren

3,4783 gold badges37 silver badges57 bronze badges

1 Comment

Haji Over a year ago

I still encounter the same problem... Can't tell what's wrong there.

xpy · Accepted Answer · 2014-01-21 10:49:56Z

0

I had the same problem, the script in data-main is loading asynchronously, that means that it may load after the scripts it defines.

The solution is to load another script with the require.config right after the require.js script.

data-main Entry Point Documentation.

answered Jan 21, 2014 at 10:49

xpy

5,6713 gold badges32 silver badges52 bronze badges

Collectives™ on Stack Overflow

Scripts Dependencies Using RequireJS Shim

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related