RequireJS incorrectly loads scripts from URLs

Question

I'm using RequireJS to load dependencies. This is how my config looks like:

'use strict';

require.config({
    paths: {
        jQuery: 'http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min',
        underscore: 'http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min',
        backbone: 'http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min'
    }
    shim: {
        jQuery: {
            exports: '$'
        },
        underscore: {
            exports: '_'
        },
        backbone: {
            deps: [
                'underscore',
                'jQuery'
            ],
            exports: 'Backbone'
        }
    }
});

When I run my static website, in the console there are messages like this:

GET http://*myhost*/js/backbone.js 404 (Not Found) require.js:1896
Uncaught Error: Script error for: backbone
http://requirejs.org/docs/errors.html#scripterror require.js:166
GET http://*myhost*/js/jQuery.js 404 (Not Found) require.js:1896
Uncaught Error: Script error for: jQuery
http://requirejs.org/docs/errors.html#scripterror require.js:166
GET http://*myhost*/js/underscore.js 404 (Not Found) require.js:1896
Uncaught Error: Script error for: underscore
http://requirejs.org/docs/errors.html#scripterror require.js:166
Uncaught ReferenceError: jQuery is not defined 

As you can see, RequireJS ignores the fact that I'm providing URLs for CND and tries to look for modules locally.

However, sometimes RequireJS works fine - it loads modules from URLs. Some kind of lottery over there. Worth to mention that it happens only on my remote development server - that is when I access my website over web. When I run my website locally, RequireJS always loads modules from CDN perfectly fine. Weird, any ideas why this is happening?

UPDATE

This is how I start my application:

<script type="text/javascript" data-main="js/main" src="js/require.js"></script>

main.js (where config is loaded)

define(['config', 'router'], function(Config, Router) {
    var router = new Router();
    Backbone.history.start();
});

Solution

Your main module starts with this:

define(['config', 'router'], function(Config, Router) {

This tells RequireJS to load config and router but does not specify the order in which they should be loaded. If router depends on modules that use the CDNs you've listed in your configuration and assuming that config is not among router's dependencies, then you would indeed get intermittent loading failures. When config happens to load before router everything is fine. If config loads after router, then all hell breaks loose. The simplest way to fix this problem would be to move your configuration into your main.js file. You could have the require.config call before the define call, and you'd obviously no longer list config among the dependencies.

If moving the call to require.config does not work for you because (for instance) you need to share config among multiple pages then this would also do the trick:

define(['config'], function () {
    require(['router'], function(Router) {
        var router = new Router();
        Backbone.history.start();
    });
});

The code above ensures that config is loaded before anything else.

Your configuration is also wrong in the following ways:

1. You must always refer to jQuery as jquery because jQuery (for better or for worse) hardcodes its module name as jquery all lower caps. I've run tests with using jQuery instead of jquery and got erratic results.

2. jQuery 2.0.3 does not need a shim. Having a shim for it only confuses RequireJS.

Comments

[user1091733]

Thank you for response. I updated my question, do you need more information?

[Louis]

Does your router module have config in its dependencies? (I guess not but I thought I'd ask.)

[user1091733]

No, definitely not :)

[Louis]

I've updated my answer with what I see is the likely explanation for what is going on with your code.

[user1091733]

Working like charm! Thanks so much!