How to use hammer.js plugins with require.js - requirejs

Question

I am trying to use hammer.js plugins with require.js but I have no luck.
Here is my code:
requirejs.config({
paths: {
"jquery": ('__proto__' in {}) ? "lib/zepto" : "lib/jquery",
"hammer-jquery": "lib/jquery.hammer",
"hammer-showtouches": "lib/hammer.showtouches",
"hammer-fakemultitouch": "lib/hammer.fakemultitouch"
},
shim: {
"jquery": {
exports: "$"
},
"hammer-showtouches": {
deps: [ "hammer-jquery" ],
exports: "Hammer.plugins.showTouches"
},
"hammer-fakemultitouch": {
deps: [ "hammer-jquery" ],
exports: "Hammer.plugins.fakeMultitouch"
}
},
waitSeconds: 30
});
requirejs(["jquery","hammer-jquery","hammer-showtouches","hammer-fakemultitouch"], function ($,Hammer) {
$(function(){
if(!Hammer.HAS_TOUCHEVENTS && !Hammer.HAS_POINTEREVENTS) {
Hammer.plugins.showTouches();
Hammer.plugins.fakeMultitouch();
}
});
});
And here is the error:
Uncaught TypeError: Cannot read property 'plugins' of undefined hammer.showtouches.js:7
Uncaught TypeError: Cannot read property 'plugins' of undefined require.js:8
Uncaught TypeError: Cannot read property 'plugins' of undefined hammer.fakemultitouch.js:7
Uncaught TypeError: Cannot read property 'plugins' of undefined require.js:8
I have tried to include Hammer in shim config with no luck (It's not necessary beacause last version of jquery.hammer is AMD compatible).

Answer 1

Your issue appears to be that you didn't include the hammerjs library which is required by the hammerjs jquery plugin.
To fix this problem, you'll need to add to your requirejs path something like 'hammer':'lib/hammerjs/dist/hammer.min',
Additionally, here's some related information on how I used hammerjs with requirejs.
In my case, I wanted it to work with backbone and requirejs. I installed the libraries with bower.
bower install --save hammerjs
bower install --save backbone.hammer
Then, I proceeded to add the RequireJS configuration:
I noticed that jquery.hammer.js is AMD and automatically requires jquery. It also silently depends on Hammer. It modifies jquery to support Hammer. No shim is required.
I noticed that hammerjs is AMD and automatically exports Hammer. No shim is required.
I noticed that backbone.hammer is AMD and automatically requires underscore, backbone, and hammer. It modifies Backbone to support Hammer. No shim is required.
Therefore, my configuration uses paths only (since no shim support is required):
require.config({
'baseUrl':'',
'paths':{
'underscore':'js/lib/underscore-amd/underscore-min',
'backbone':'js/lib/backbone-amd/backbone-min',
'jquery':'js/lib/jquery/jquery.min',
'hammer':'js/lib/hammerjs/dist/hammer.min',
'jquery-hammer':'js/lib/hammerjs/dist/jquery.hammer.min',
'backbone-hammer':'js/lib/backbone.hammer/backbone.hammer'
},
shim:{
'underscore': { exports: '_' },
'backbone': { deps: ['underscore', 'jquery'], exports: 'Backbone' }
}
});

Answer 2

Wrap HammerJS then bind to the global window:
// #path utils/hammer
define([
'hammer'
], function (Hammer) {
window.Hammer = Hammer;
});
Then make whatever plugins or modules which have dependencies on HammerJS depend on utils/hammer.