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!
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.