RequireJS shim issues with IE8 and less

Question

I'm having a hard time here, I'm trying to load non-AMD modules jquery / lodash / underscore before any of my AMD modules will be loaded. I know that I should use 'shim' and I do. Evertyghing seems to work in every browser except IE8 and less. Is there some kind of workaround for IE7/8 ?

I've took a look at 'use' plugin / 'order' plugin and wrapping global variables into AMD modules (http://tbranyen.com/post/amdrequirejs-shim-plugin-for-loading-incompatible-javascript). Everything faild. Any ideas of how should it be done?

EDIT

require.config({
use: {
    backbone: {
        deps: ["underscore", "jquery"],
        attach: "Backbone"
    },

    underscore: {
        attach: "_"
    },

    jquery : {
        attach: 'jquery'
    }
},
paths: {
    'underscore': 'lodash-1.3.1.min',
    'backbone': 'backbone-1.0.0.min',
    'jquery': 'jquery-1.10.2.min',
}
});

require([
'use',
'jquery',
'underscore',
'backbone',
'app',
], function($) {
'use strict';
});

'use' is the use.js plugin. I've also used 'shim' before.

EDIT 2

shim: {
    'app': {
        deps: ['backbone']
    },
    'backbone': {
        deps: ['underscore', 'jquery'],
        exports: 'Backbone'
    },
    'underscore': {
        exports: '_'
    },
    'jquery' : {
        exports: 'jquery'
    },
},

my shim config. REQUIREJS VERSION IS 2.1.10.

Edit 3:

require.config({
paths: {
    'underscore': '//cdn.vgc.no/js/libs/lodash/lodash-1.3.1.min',
    'backbone': '//cdn.vgc.no/js/libs/backbone/backbone-1.0.0.min',
    'jquery': '//cdn.vgc.no/js/libs/jquery/jquery-1.10.2.min'
},
enforceDefine : true
});

require([
'jquery',
'underscore',
'backbone'
], function($, _, Backbone) {
'use strict';

console.log($);
console.log(_);
console.log(Backbone);
})

does this should work under IE8 ?

Hmm... how come you don't have enforceDefine and exports set as I suggested in your other question? If it is because you use use, then don't use use. There's nothing in your question that suggests to me you should be using use. Did I miss something? — Louis
cause 'enforceDefine' just gives U an information what's wrong, and I know what is it... Backbone and the rest are not AMD. So In my mind shim is not working with IE7/8 - is that right ? — Oskar Szura
The thing is... does SHIM work under IE8 and less? If not... is there a workaround for it? — Oskar Szura
Shims should be working even in IE7 and IE8. However, it is possible to to write a shim that won't work correctly. The config in your question should show us how you use the shim configuration. Also, make sure you are using RequireJS 2.x because shim does not exist in the 1.x series. (It happened that we've had questions asked here on SO where the problem was the the user used an old version of RequireJS.) — Louis
Lodash & Backbone are amd compliant too, so remove the exports. — asgoth

Louis Louis · Accepted Answer · 2014-02-21T13:10:48

The shim for jquery is superfluous.

Also, if app is an actual RequireJS module, you do not need a shim for it. The define call for app should be define(['backbone'], function (Backbone) {....

Asgoth pointed out that lodash and Backbone are AMD-compliant so you should not have a shim for underscore or Backbone. You use lodash for underscore. Lodash has not needed a shim in a while (maybe ever). Backbone used to need a shim but it now has support for AMD-style loaders.

So at the moment, none of the shims in your configuration seem necessary. You should still use enforceDefine.

In case this was the source of confusion, let me clarify that the basic rule for using shims is this: if a module uses define to define itself, then it must not have a shim; if a module does not use define, then it must have a shim. The documentation that talks about using enforceDefine and making sure that all shims have exports set does not change this rule. What it is saying is that if a shim is required (according to the rule above), then this shim should have an exports field.

Edit: I'm able to get it to load in IE8 with the following code. You'll see a shim for Backbone there, despite my earlier comments. Why? Because you are using Backbone 1.0.0 which does not have AMD support. The latest version, Backbone 1.1.2, has support for AMD. So if you were to upgrade to this version, you would not need the shim. (This code prefixes the CDN paths with http: but I do not believe it is a factor in your problem. It's just that I first loaded the test HTML from my local filesystem and to do this, the http: prefix was required.)

  require.config({
      paths: {
          'underscore': 'http://cdn.vgc.no/js/libs/lodash/lodash-1.3.1.min',
          'backbone': 'http://cdn.vgc.no/js/libs/backbone/backbone-1.0.0.min',
          'jquery': 'http://cdn.vgc.no/js/libs/jquery/jquery-1.10.2.min'
      },
      shim: {
          backbone: {
              deps: ["jquery", "underscore"],
              exports: "Backbone"
          }
      },
      enforceDefine : true
  });

  require([
      'jquery',
      'underscore',
      'backbone'
  ], function($, _, Backbone) {
      'use strict';

      console.log($);
      console.log(_);
      console.log(Backbone);
  });

Here's a screenshot of the console output in IE8:

Screenshot in SauceLab

RequireJS shim issues with IE8 and less

1 Answers