Webpack problem of include draggabilly npm package

[geohuz]

npm install draggabilly, and import Draggabilly from 'draggabilly', got the following error message:

ERROR in ./~/draggabilly/draggabilly.js Module not found: Error: Cannot resolve module 'classie/classie' in /node_modules/draggabilly @ ./~/draggabilly/draggabilly.js 13:4-21:8

ERROR in ./~/draggabilly/draggabilly.js Module not found: Error: Cannot resolve module 'get-style-property/get-style-property' in /node_modules/draggabilly @ ./~/draggabilly/draggabilly.js 13:4-21:8

ERROR in ./~/draggabilly/~/get-size/get-size.js Module not found: Error: Cannot resolve module 'get-style-property/get-style-property' in /node_modules/draggabilly/node_modules/get-size @ ./~/draggabilly/~/get-size/get-size.js 241:2-70

ERROR in ./~/draggabilly/~/unidragger/~/unipointer/unipointer.js Module not found: Error: Cannot resolve module 'eventEmitter/EventEmitter' in /node_modules/draggabilly/node_modules/unidragger/node_modules/unipointer @ ./~/draggabilly/~/unidragger/~/unipointer/unipointer.js 16:4-21:6

[desandro]

Sounds like a Webpack issue 883.

Install Draggabilly and imports-loader with npm.

npm install draggabilly
npm install imports-loader

In your config file, webpack.config.js, use the imports loader to disable define and set window for draggabilly modules.

// npm <= v2
module.exports = {
  module: {
    loaders: [
      {
        test: /draggabilly/,
        loader: 'imports?define=>false&this=>window'
      }
    ]
  }
};

// npm >= v3
module.exports = {
  module: {
    loaders: [
      {
        test: /draggabilly|desandro|get\-size|classie|unidragger|unipointer|eventemitter/,
        loader: 'imports?define=>false&this=>window'
      }
    ]
  }
};

This hack is required because of an issue with how Webpack loads dependencies. +1 webpack/webpack#883 to help get this issue addressed.

You can then require('draggabilly').

// main.js
var Draggabilly = require('draggabilly');

var draggie = new Draggabilly( '.item', {
  // options...
});

Run webpack.

webpack main.js bundle.js

[geohuz]

Yeah! I just found the similar solution on the flicktiy site :-), thanks a lot!

[desandro]

With Draggabilly v2.1.0, I've resolved all the Webpack dependency issues. You can now require('draggabilly') with Webpack and not have to include any extra webpack.config.js code.

If you run into any other issues with Draggabilly and Webpack, please open a new issue.