Can't load the inview jQuery plugin using RequireJS

Question

I'm trying to use the inview plugin within my app, which uses RequireJS to load scripts and is being built / optimised with Almond. I get a console error:

TypeError: 'undefined' is not an object (evaluating 'global.jquery.inview')

Which appears to come from the shim that require is adding to the end of the inview file:

define("jquery.inview", ["jquery"], (function (global) {
    return function () {
        var ret, fn;
        return ret || global.jquery.inview;
    };
}(this)));

My require config is as follows:

require.config({
    paths: {
        'jquery': '../../bower_components/jquery/dist/jquery',
        'text': '../../bower_components/requirejs-text/text',
        'tweenmax': '../../bower_components/greensock/src/uncompressed/TweenMax',
        'jquery.inview': '../../bower_components/jquery.inview/jquery.inview'
    },
    shim: {
        "jquery.inview": {
            deps: ['jquery'],
            exports: 'jquery.inview'
        }
    }
});

Any help much appreciated!

Answer 1

jquery.inview is a jQuery plugin. Therefore it installs itself as plugins do, by modifying $. When you tell RequireJS that it exports jquery.inview RequireJS tries to resolve jquery.inview in the global space, which does not work because jQuery is accessible in the global space as $ or jQuery, and not as jquery.

You could leave the exports out or set it to something that jquery.inview does define. For instance, reading the code of jquery.inview I see that it sets $.event.special.inview so you could use this in your exports.

In case you are wondering, for jQuery plugins the exports value is useful only for RequireJS' bookkeeping. You don't yourself access the plugin through the value it exports but through the API it exposes through jQuery.