CODEWITHSUNDEEP
javascriptjqueryrequirejs
Sean Anderson
Sean Anderson

Reputation: 29291

Loading jQuery plugins using RequireJS -- jQuery undefined intermittently even after specifying deps?

I am attempting to load jQuery.jstree through RequireJS. You can see the exact source of the plugin here: https://gist.github.com/MeoMix/7882144

As I understand it, jQuery.jstree has three dependecies: jQuery, jQuery UI, and jQuery.cookie.

I begin with by loading my RequireJS shim config and then call an initial 'require' to kick things off:

require.config({

    //  Set the base URL to the Scripts directory of CSWeb
    baseUrl: '/csweb/Scripts/',

    shim: {
        'jquery-ui': ['jquery'],
        'jquery.jstree': ['jquery', 'jquery-ui', 'jquery.cookie'],
        'jquery.cookie': ['jquery']
    }

});

Here, I define my base URL relative to the root of my JavaScript files. The file jquery.js is located at the baseUrl. I also define dependencies for both plugins. Note: I have tried playing around with more explicit shim declarations including defining exports. I noticed no difference in effect.

After defining my config, I call:

require([
    'jquery',
    'jquery-ui',
    'jquery.cookie',
    'jstree/jquery.jstree'
], function () {
    'use strict';

});

Doing so yields an error intermittently. Clearly an async-loading issue. The error reads:

Uncaught ReferenceError: jQuery is not defined jquery.jstree.js:978

Line 978 of jquery.jstree is simply where jQuery is passed into the closure to begin initialization of the plugin:

// 978 jquery.jstree.js: })(jQuery);

What am I not understanding here? I don't seem to experience this issue with most of my plugins. Is there something especially crappy about how this jstree plugin was written such that it is giving RequireJS fits? Or am I not understanding a core mechanic of RequireJS shim configuration?

UPDATE 1: It appears that it is something to do with the fact that I load jquery.jstree from a path. If I load another, empty file (jstree/jquery.test) -- I am able to replace the issue. However, if I then move test up a directory such that it is level with the other plugins -- it all loads fine.

Upvotes: 3

Views: 2727

Answers (1)

Louis
Louis

Reputation: 151401

The whole path you give to the shim configuration has to match the whole path of the module you require.

You name the shim jquery.jstree but you require it as jstree/jquery.jstree, so RequireJS does not use the shim and thus does not know that the plugin depends on jquery, etc. and so you get intermittent errors.

For things like plugins that I might want to use globally, I prefer to give them a well-known name that I can use throughout my application without worrying about paths. So in your case, I'd fix the problem by adding this to my config:

paths: {
    "jquery.jstree": "jstree/jquery.jstree"
}

and I would then require it jquery.jstree.

Upvotes: 3

Related Questions