Does Requirejs 2.0 and jQuery require plugins using the ShimConfig path?

Question

I use requirejs 2.x and load jQuery from CDN and backup in local file. I am trying to load jQuery plugins using shim config solution. This seems to work fine with fast connections and local browsers, however, when I tested wireless or slow connections, I seem to get random errors when plugins look for jquery and it is not loaded yet. although I went through the docs and other sites related to this issue, the setup looks fine.

The following is an example.

// main.js requirejs.config({ baseUrl: "scripts", paths: { "jquery" : [ "//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min", "libs/jquery/jquery-1.8.0.min" ], "$plugins":"./libs/jquery", "modules" : "./app/modules", }, shim: { "jquery.easing" : ["jquery"], "jquery.urlutils": ["jquery"] }, priority: ["jquery"] }); // somemodule.js define([ 'modules/otherModule', 'jquery', '$plugins/jquery.urlutils' ], function( OtherModule, $ ) { // code... }); 

Here we see that "somemodule" loads jQuery and otherModule (works fine). jquery, on the other hand, only loads sometimes before the plugin. I tried adding a plugin to the paths object with a direct path, and then in the "somemodule" above I skipped the path of $ plugins. it seems to be tuned perfectly every time. But does this not destroy the purpose of the gasket? I do not like the fact that I need to configure the path and install its dependencies.

Any help would be greatly appreciated. it drives me crazy.:)

Am I missing something? or do I need to attach a pad key to the $ plugins path before the jquery plugin?

Possible Solution

I found a solution ... I believe; I am still testing to confirm cross browser.

Note the jquery plugin path (jquery.urlutils) in the pad and the list of definition dependencies in "somemodule". Also note that I use the path to connect directly to the actual location of the plugin.

Also note that I have not finished using 'enforeDefine', if I do this, I get the error again and / or the 'define does not exists' error.

 requirejs.config({ baseUrl: "scripts", paths: { "jquery" : [ "//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min", "libs/jquery/jquery-1.8.0.min" ], "$plugins":"./libs/jquery", "modules" : "./app/modules", }, shim: { "$plugins/jquery.easing" : ["jquery"], "$plugins/jquery.urlutils": ["jquery"] }, priority: ["jquery"] }); // somemodule.js define([ 'modules/otherModule', 'jquery', '$plugins/jquery.urlutils' ], function(OtherModule, $ ) { // code... }); 

Answer 1

I am really looking through all the RequireJS 2.0 documentation right now and have come across something that I think will solve your problem.

You need to set enforceDefine to true in require config, for example:

 requirejs.config({ //To get timely, correct error triggers in IE, force a define/shim exports check. enforceDefine: true, }) 

This requires an undef() model with an error and wait for the model to be correctly defined before continuing. Read about it here.

As you read the documentation further, you should also set the exports value for the return value of the included script, so that require has a variable that it can check to make sure the download was successful. Add jQuery and jquery-ui to your pad.

 shim: { "jquery": { exports: "jQuery" }, "jquery-ui": { deps: ['jquery'], exports: "jQuery.ui" } }