使用Backbone.js和Require.js的IE8网站错误

Question

I'm getting the following errors coming back in IE8:

Message: Object expected Line: 27 Char: 1 Code: 0 URI: http://cdn.example.com/images/example4/js/libs/jquery.backgroundSize.js

Message: '$.fn' is null or not an object Line: 8 Char: 1 Code: 0 URI: http://cdn.example.com/images/example4/js/libs/jquery.waitUntilExists.js

Message: 'fn' is null or not an object Line: 62 Char: 73 Code: 0 URI: http://cdn.example.com/images/example4/js/libs/jquery.nicescroll.js

Message: Object expected Line: 34 Char: 231 Code: 0 URI: http://cdn.example.com/images/example4/js/libs/backbone.js

Message: 'Vent' is null or not an object Line: 19 Char: 3 Code: 0 URI: http://cdn.example.com/images/example4/js/models/auth.js

Our site is a SPA built with Backbone.js and Require.js for dependency management. This problem only shows up on IE8 (and possibly earlier versions). Each of these files, with the exception of the last which is caused because 'Vent' extends Backbone.Event, are all created as shims for Backbone.js in our Require.js config file.

Require.js config:

requirejs.config({
    baseUrl: 'http://cdn.staging.example.com/images/example4/js',
    paths: {
        underscore: './libs/underscore',
        jquery: './libs/jquery',
        backbone: './libs/backbone',
        example: './libs/example',
        blockui: './libs/jquery.blockUI',
        backgroundsize: './libs/jquery.backgroundSize',
        nicescroll: './libs/jquery.nicescroll',
        waituntilexists: './libs/jquery.waitUntilExists',
        swfobject: './libs/swfobject',
        spinner: './libs/jquery.spinner'
    },
    //Create shims for Backbone
    shim: {
        'backgroundsize': {
            deps: [ 'jquery'],
            exports: 'backgroundsize'
        },
        'nicescroll': {
            deps: ['jquery'],
            exports: 'nicescroll'
        },
        'waituntilexists': {
            deps: ['jquery'],
            exports: 'waituntilexists'
        },
        'spinner': {
            deps: ['jquery'],
            exports: 'spinner'
        },
        'backbone': {
            deps: [ 'underscore', 'jquery','blockui','backgroundsize','nicescroll', 'waituntilexists', 'swfobject', 'spinner'],
            exports: 'Backbone'
        }
    }
});

requirejs(['app'],
    function(App){
        App.initialize();
    });

Any suggestions as what would be causing this, we're using Backbone.js 0.9.2 and Require.js 2.0.6.

Answer 1

IE has some issues with shims as you can read here http://requirejs.org/docs/errors.html#nodefine

As far as I understand from http://requirejs.org/docs/api.html#config-shim

Only use other "shim" modules as dependencies for shimmed scripts, or AMD libraries that have no dependencies and call define() after they also create a global (like jQuery or lodash). Otherwise, if you use an AMD module as a dependency for a shim config module, after a build, that AMD module may not be evaluated until after the shimmed code in the build executes, and an error will occur. The ultimate fix is to upgrade all the shimmed code to have optional AMD define() calls.

There could be an issue with having jquery as a dependency of a shim or jquery was not loaded so it couldnt set it's global.

Answer 2

Try adding backbone to your main require like this:

    requirejs(['app', 'backbone'], function(App){ App.initialize(); });

Also, try to use r.js to generate one concatenated file (make sure you turn off optimization) and you can see the order in which require is loading scripts.