Properly loading webshims / modernizr with requirejs?

StackOverflow https://stackoverflow.com/questions/20075985

Question

I have modernizr / pollyfiller included at the top of my index.html file, and in my main.js:

require.config({
    paths : {
    'jquery' : 'lib/jquery-1.10.2.min',
    'jqdate' : 'lib/jquery.dateFormat-1.0',
    'webshims' : 'lib/polyfiller'
},
shim : {
    'lib/underscore' : {
        exports : '_'
    },
    'lib/backbone' : {
        deps : ["lib/underscore", "jquery"],
        exports : 'Backbone'
    },
    "modernizr" : {
        deps : ["jquery"],
        exports : "modernizr"
    },
    "webshims" : {
        deps : [ "jquery", "lib/modernizr-custom"],
        exports: "webshims"
    }
}
});
var router, vent;

    require(["jquery", "lib/underscore", "lib/backbone", "app", "lib/modernizr-custom", "webshims"], function($, _, Backbone, Router, modernizr, webshims) {

$(function() {
    $.webshims.setOptions('forms forms-ext', {
        replaceUI : false,
        waitReady : false
    });

    $.webshims.polyfill('forms forms-ext');

    router = new Router();
    vent = _.extend({}, Backbone.Events);
    $.expr.cacheLength = 1;

    Backbone.history.start({

    });
});
});

This will generally load fine, however, sometimes it looks like webshims is not defined by the time I try to call:

    $.webshims.setOptions('forms forms-ext', {
        replaceUI : false,
        waitReady : false
    });

    $.webshims.polyfill('forms forms-ext');

and I get the error: TypeError: $.webshims is undefined

Is there a better way to load this?

edit So, I updated the script like you said, and had to capitalize Webshims in the paths and shim definition. It loads fine but now I get an error:

Uncaught SyntaxError: Unexpected token <

in Chrome and

SyntaxError: syntax error


<!DOCTYPE html>

in firefox

Was it helpful?

Solution

Updated Answer

Alexander Farkas pointed out in a comment that polyfiller defines itself as "polyfiller" like this:

define('polyfiller', ['jquery'], factory);

So:

  1. No shim should be required to load polyfiller.js.

  2. The module defined by polyfiller.js should always be referred to as "polyfiller". So there has to be a paths setting that maps the module name polyfiller to the actual path of the polyfiller.js file.

So the original config should be modified to remove the "webshims" shim, then the paths setting "webshims": "lib/polyfiller" should become "polyfiller": "lib/polyfiller" and the require call should be:

require(["jquery", "lib/underscore", "lib/backbone", "app", "lib/modernizr-custom", "polyfiller"], function($, _, Backbone, Router, modernizr) {

I've dropped the last variable from the function's parameters because there's no need to pass the module value since the polyfiller.js file registers itself as $.webshims.

This is similar to how jQuery defines itself as "jquery" (it needs no shim and is always called "jquery").

Original Answer

Change your require call so that you require "webshims" instead of "lib/polyfiller":

require(["jquery", "lib/underscore", "lib/backbone", "app", "lib/modernizr-custom", "webshims"], ...

The code in your question shows you've set the paths configuration option so that the module name "webshims" resolves to "lib/polyfiller", and created what looks like a sensible shim for it. However, when you require the webshims module you refer to it as "lib/polyfiller". RequireJS does not do a reverse resolution to figure out that "lib/polyfiller" is "webshims".

Alternatively, you could drop the "webshims" name from paths and rename the shim so that it is set for "lib/polyfiller". However, I consider it to be a better practice to refer to 3rd party libraries by one-word names throughout an application rather than have paths for them. So "jquery", "bootstrap", "underscore", and "webshims" etc. rather than "lib/...".

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top