RequireJS, Shim doesn't work correct when CDN failover occurs

Question

I have the website, which is use intranet (small share) as well as on the internet (larger share). Intranet environment, doesn't have internet access. I was planning to load JavaScript from CDN for internet users, while using a local version for intranet user. I am using RequireJS library to dynamically load the scripts, and use failover, when it can't retrieve from the CDN.

I am using the following requireJS configuration to load jQuery library from CDN or use the local one.

Problem occurs, when RequireJS fails to load from CDN, it loads the bootstrap library prior of loading of local version of jquery. This cause two error, 'Bootstrap requires jQuery' from bootstrap and timeout error from requireJS.

My question, how to I avoid this? I want bootstrap to wait till any (CDN or local) version of jQuery is loaded. I have use Shim to define bootstrap dependency on jQuery library. But, it didn't work as anticipated. Is this known bug in requireJS?

Here, my configuration code

require.config({
    paths: {
        jquery: ['https://code.jquery.com/jquery-1.10.2'
            , '/Scripts/_Ref/jquery-1.10.2'],
        async: '/Scripts/_Ref/async',
        propertyParser: '/Scripts/_Ref/propertyParser',
        goog: '/Scripts/_Ref/goog',
        bootstrap: '/Scripts/_Ref/bootstrap'
    },
    shim: {
        'bootstrap': {
            deps: ['jquery']
        }
    }
});

require.onError = function (err) {
    console.log('RSC JS Error: ' + err.requireType);
    if (err.requireType === 'timeout') {
        var errorMessage = 'Following modules timeout: ' + err.requireModules;
        console.log(errorMessage);
        MyNamespace.ShowErrorMessage(errorMessage);        
    }    
};

To demonstrate the problem, I have create a sample website, where I have block the internet and stimulate failover to occur. Here, is the video link http://www.screencast.com/t/gcQ2I9aUdBY where I have shown problem in action

This is definitely not a bug in RequireJS. Are you using the latest version of RequireJS? — Louis, Aug 27 '14 at 10:42

score 1 · Answer 1 · edited May 23 '17 at 11:52

It sounds like CDN javascripts and RequireJS shims don't play well together. From the RequireJS documentation:

Do not mix CDN loading with shim config in a build. Example scenario: you load jQuery from the CDN but use the shim config to load something like the stock version of Backbone that depends on jQuery. When you do the build, be sure to inline jQuery in the built file and do not load it from the CDN. Otherwise, Backbone will be inlined in the built file and it will execute before the CDN-loaded jQuery will load. This is because the shim config just delays loading of the files until dependencies are loaded, but does not do any auto-wrapping of define. After a build, the dependencies are already inlined, the shim config cannot delay execution of the non-define()'d code until later. define()'d modules do work with CDN loaded code after a build because they properly wrap their source in define factory function that will not execute until dependencies are loaded. So the lesson: shim config is a stop-gap measure for non-modular code, legacy code. define()'d modules are better.

For explanations that are easier to understand, see this StackOverflow question.

We seem to have some luck not loading Bootstrap with RequireJS; instead, we're using script tags in <head>:

<script type="text/javascript" sync src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
   // Load jQuery if CDN fails
   window.jQuery || document.write('<script src="scripts/libs/jquery.min.js">\x3C/script>')
</script>
<script type="text/javascript" sync src="//maxcdn.bootstrapcdn.com/bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript">
   // Load bootstrap if CDN fails
   window.jQuery.fn.dropdown || document.write('<script src="scripts/libs/bootstrap.min.js">\x3C/script>')
</script>
<script type="text/javascript">
   var require = {
      baseUrl: "scripts/",
      deps: ['main']
   };
</script>
<script type="text/javascript" src="scripts/libs/require/require.js"></script>

jQuery and Bootstrap are loaded from CDN's with local fallback per Hanselman.

RequireJS, Shim doesn't work correct when CDN failover occurs

1 Answers1