Question

83

RequireJS incorrectly loads scripts from URLs

rated 0 times [ 88] [ 5] / answers: 1 / hits: 12467 / 10 Years ago, fri, april 4, 2014, 12:00:00

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();

});

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

tonisandyp

Add To Favorites

Follow

Total Points: 694

Total Questions: 97

Total Answers: 77

Location: British Indian Ocean Territory

Member since Tue, Feb 22, 2022

2 Years ago

answered 10 Years ago dequant · Accepted Answer

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:

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.

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