Install via npm and using it with webpack fails

[tedbarth]

I recently started using hammer.js. I like the simple API and it worked out of the box together with webpack. Sadly I got some issues with Firefox and after browsing the original GitHub project I saw that no one has released a new version since 2 years. I was happy to find your fork via this issue then.

I managed to install it via npm using the following command after uninstalling the original hammerjs dependency:

$ npm install git+https://git@github.com/naver/hammer.js.git --save

Which led to the following entry in my package.json:

"dependencies": { "@egjs/hammerjs": "git+https://git@github.com/naver/hammer.js.git", [...] }

I use your hammerjs exactly as I did before. I only prefixed it with @egjs as my IntelliJ idea (my IDE) suggested (it can find your code and complete symbols from it as it could do for the original hammerjs installed from here). Following code I do use:

import Hammer from '@egjs/hammerjs';

[...]
if (someMethodOfMine()) {
  const hammer = new Hammer(this._zoomContainer);
  // Let the pan gesture support all directions.
  // This will block the vertical scrolling on a touch-device while on the element.
  hammer.get('pan').set({direction: Hammer.DIRECTION_ALL});
  [...]

Now, when running npm run build (which only starts webpack: "build": "webpack") I get the following error:

$ npm run build

> myapp@1.0.0 build /home/myapp/myapp
> webpack

Hash: da045e6d5d70dd4ec7dd
Version: webpack 4.20.2
Time: 464ms
Built at: 2018-10-25 22:39:06
Entrypoint main =
[0] ./frontend-src/js/index.js + 15 modules 63.9 KiB {0} [built]
    | ./frontend-src/js/index.js 1.49 KiB [built]
    | ./frontend-src/js/Controller.js 15.7 KiB [built]
    | /* and some others that are not necessary to share here :) */
    |     + 1 hidden module

ERROR in ./frontend-src/js/Controller.js
Module not found: Error: Can't resolve '@egjs/hammerjs' in '/home/myuser/myapp/frontend-src/js'
 @ ./frontend-src/js/Controller.js 1:0-36 110:27-33 113:42-48
 @ ./frontend-src/js/index.js

ERROR in chunk main [entry]
myapp.js
/home/myuser/myapp/frontend-src/js/index.js e62fdf4ffffe30532d2cbf9df45effaf
Unexpected token (98:27)
| 
|       if (__WEBPACK_MODULE_REFERENCE__1_6973546f756368446576696365_call__()) {
|         const hammer = new !(function webpackMissingModule() { var e = new Error("Cannot find module '@egjs/hammerjs'"); e.code = 'MODULE_NOT_FOUND'; throw e; }())(this._zoomContainer);
|         // Let the pan gesture support all directions.
|         // This will block the vertical scrolling on a touch-device while on the element.
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! myapp@1.0.0 build: `webpack`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the myapp@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/myuser/.npm/_logs/2018-10-25T20_39_06_305Z-debug.log

The complete log from last line of the previous snippet contains:

0 info it worked if it ends with ok
1 verbose cli [ '/usr/bin/node', '/usr/local/bin/npm', 'run', 'build' ]
2 info using npm@6.4.1
3 info using node@v10.12.0
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle myapp@1.0.0~prebuild: myapp@1.0.0
6 info lifecycle myapp@1.0.0~build: myapp@1.0.0
7 verbose lifecycle myapp@1.0.0~build: unsafe-perm in lifecycle true
8 verbose lifecycle myapp@1.0.0~build: PATH: /usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/home/myuser/myapp/node_modules/.bin:/home/myuser/bin:/home/myuser/.local/bin:/home/myuser/bin:/home/myuser/.local/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin
9 verbose lifecycle myapp@1.0.0~build: CWD: /home/myuser/myapp
10 silly lifecycle myapp@1.0.0~build: Args: [ '-c', 'webpack' ]
11 silly lifecycle myapp@1.0.0~build: Returned: code: 2  signal: null
12 info lifecycle myapp@1.0.0~build: Failed to exec build script
13 verbose stack Error: myapp@1.0.0 build: `webpack`
13 verbose stack Exit status 2
13 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:301:16)
13 verbose stack     at EventEmitter.emit (events.js:182:13)
13 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:182:13)
13 verbose stack     at maybeClose (internal/child_process.js:962:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:251:5)
14 verbose pkgid myapp@1.0.0
15 verbose cwd /home/myuser/myapp
16 verbose Linux 4.15.0-36-generic
17 verbose argv "/usr/bin/node" "/usr/local/bin/npm" "run" "build"
18 verbose node v10.12.0
19 verbose npm  v6.4.1
20 error code ELIFECYCLE
21 error errno 2
22 error myapp@1.0.0 build: `webpack`
22 error Exit status 2
23 error Failed at the myapp@1.0.0 build script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 2, true ]

My webpack config looks like this:

const path = require('path');

module.exports = {
  entry: './frontend-src/js/index.js',
  output: {
    filename: 'myapp.js',
    path: path.resolve(__dirname, 'frontend-dist/js')
  },
  mode: 'production',
  devtool: 'source-map'
};

I hope you can tell me that it is just a simple fix to make your project run with webpack as it did before with the original one. Thanks in advance.

[jongmoon]

@tedbarth Thank you for your detail reporting. I'll check it as soon as possible.

[jongmoon]

Solution

I find your solution.

use
npm install @egjs/hammerjs --save

instead of
npm install git+https://git@github.com/naver/hammer.js.git --save

Reason for Fails

Because we did not provide distribution files (which is referenced by npm) on master branch.

hammer.js/package.json

Line 67 in c9a0bd2

"module": "dist/hammer.esm.js",

But fortunately we provided it on npmjs repo, So you can download new hammer.js on npmjs.
using..

npm install @egjs/hammerjs --save

Plan

• I'll update README for user who have same experience like you.

If you have any issue, then please comment again.

[tedbarth]

Problem solved. Thanks for the very fast fix! Didn't expect that! 🥇