Loading with webpack #225

prewk · 2015-08-25T11:12:57Z

Has anyone successfully loaded flickity via npm with webpack?

var Flickity = require('flickity');

Ends up in this, for me:

ERROR in /Users/oskar/src/x/~/flickity/js/drag.js
Module not found: Error: Cannot resolve module 'classie/classie' in /Users/oskar/src/x/node_modules/flickity/js
 @ /Users/oskar/src/x/~/flickity/js/drag.js 7:4-15:6

ERROR in /Users/oskar/src/x/~/flickity/js/flickity.js
Module not found: Error: Cannot resolve module 'classie/classie' in /Users/oskar/src/x/node_modules/flickity/js
 @ /Users/oskar/src/x/~/flickity/js/flickity.js 18:4-28:6

ERROR in /Users/oskar/src/x/~/flickity/js/flickity.js
Module not found: Error: Cannot resolve module 'eventEmitter/EventEmitter' in /Users/oskar/src/x/node_modules/flickity/js
 @ /Users/oskar/src/x/~/flickity/js/flickity.js 18:4-28:6

ERROR in /Users/oskar/src/x/~/flickity/js/player.js
Module not found: Error: Cannot resolve module 'eventEmitter/EventEmitter' in /Users/oskar/src/x/node_modules/flickity/js
 @ /Users/oskar/src/x/~/flickity/js/player.js 7:4-13:6

ERROR in /Users/oskar/src/x/~/flickity/js/lazyload.js
Module not found: Error: Cannot resolve module 'classie/classie' in /Users/oskar/src/x/node_modules/flickity/js
 @ /Users/oskar/src/x/~/flickity/js/lazyload.js 7:4-14:6

ERROR in /Users/oskar/src/x/~/flickity/js/animate.js
Module not found: Error: Cannot resolve module 'get-style-property/get-style-property' in /Users/oskar/src/x/node_modules/flickity/js
 @ /Users/oskar/src/x/~/flickity/js/animate.js 7:4-12:6

ERROR in /Users/oskar/src/x/~/flickity/~/fizzy-ui-utils/utils.js
Module not found: Error: Cannot resolve module 'matches-selector/matches-selector' in /Users/oskar/src/x/node_modules/flickity/node_modules/fizzy-ui-utils
 @ /Users/oskar/src/x/~/flickity/~/fizzy-ui-utils/utils.js 15:4-20:6

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

ERROR in /Users/oskar/src/x/~/flickity/~/tap-listener/~/unipointer/unipointer.js
Module not found: Error: Cannot resolve module 'eventEmitter/EventEmitter' in /Users/oskar/src/x/node_modules/flickity/node_modules/tap-listener/node_modules/unipointer
 @ /Users/oskar/src/x/~/flickity/~/tap-listener/~/unipointer/unipointer.js 16:4-21:6

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

In other words, webpack doesn't play nice with the UMD loader for some reason.

With some exports-loader/imports-loader tweaking I was able to load the actual dist/flickity.pkgd.js but then I got stuck on it trying to load jquery-bridget and jquery which I didn't think was an actual dependency.

Is flickity dependent on jquery?

Thanks!

The text was updated successfully, but these errors were encountered:

prewk · 2015-08-26T13:23:54Z

Got it loading by installing imports-loader and adding this rule to my webpack config: { test: /node_modules\/flickity/, loader: 'imports?define=>undefined' }

In other words: Disabling AMD for Flickity and all of its deps solved my problem.

johnhornsby · 2015-09-06T19:42:59Z

This worked for me also thank you. { test: /node_modules\/unidragger/, loader: 'imports?define=>undefined' }

PaulTondeur · 2015-10-01T09:22:02Z

A better solution might be to load the packaged version instead flickity/dist/flickity.pkgd.js

prewk · 2015-10-01T10:19:25Z

@PaulTondeur I went down that route and it's no good. It's full of UMD loaders that for some reason are incompatible with webpack.

PaulTondeur · 2015-10-01T10:30:03Z

Really? It seems to be working pretty well for me here. No issues at all.

prewk · 2015-10-01T10:46:48Z

Oh, circumstances must've changed since I posted this issue, then. Hopefully the next googler can find a solution in this thread!

PaulTondeur · 2015-10-01T10:48:07Z

Nice! That's why I left the comment :-)

benbonnet · 2015-11-16T11:50:35Z

hummm… still getting the errors mentionned initially, even with requiring flickity.pkgd.js
Any others tips ?

prewk · 2015-11-16T12:03:06Z

Did you try my trick?

{ test: /node_modules\/flickity/, loader: 'imports?define=>undefined' } in the webpack config, and npm install imports-loader if you don't already have it.

benbonnet · 2015-11-16T12:07:03Z

sorry, i was confused by the flickity/dist/flickity.pkgd.js mentionned in the middle of the replies, which with your trick results in the errors you mentionned initially.

npm install imports-loader
then
{ test: /node_modules\/flickity/, loader: 'imports?define=>undefined' }
then
var Flickity = require('flickity');
does work

prewk · 2015-11-16T12:15:03Z

Great!

desandro · 2015-11-17T18:15:34Z

Added Webpack instructions to docs

Install Flickity and imports-loader with npm.

npm install flickity
npm install imports-loader

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

module.exports = {
  module: {
    loaders: [
      {
        test: /flickity/,
        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('flickity').

// main.js
var Flickity = require('flickity');

var flkty = new Flickity( '.gallery', {
  // options...
});

Run webpack.

webpack main.js bundle.js

imagesLoaded, asNavFor and jQuery plugin functionality need to be installed separately, similar to using Browserify.

nickhudkins · 2015-11-18T17:18:04Z

FYI, this will break if you are using npm3 due to the flattening of dependencies, so your webpack loader will need to look sort of like so:

      {
        test: /(flickity|fizzy-ui-utils|get-size|unipointer)/,
        loader: 'imports?define=>false&this=>window'
      }

homerjam · 2016-01-07T16:37:25Z

FWIW I fixed my issue with this by installing imagesloaded via bower and adding a resolve fallback to bower_components in my webpack config.

resolve: {
    root: 'node_modules',
    fallback: 'bower_components',
}

johjacb · 2016-02-17T19:03:26Z

I followed all of the other instructions on the page, and this is the only one that worked for me.

FYI, this will break if you are using npm3 due to the flattening of dependencies, so your webpack loader will need to look sort of like so:

  {
    test: /(flickity|fizzy-ui-utils|get-size|unipointer)/,
    loader: 'imports?define=>false&this=>window'
  }

Ref metafizzy/flickity#225

davepullen19 · 2016-04-19T16:51:36Z

Is it me, or does this fix only work one directory level deep? As soon as I use Flickty in a component e.g. src > components > partials > file.js, I get the error again. Moving the file up to the components directory works. Any ideas?

desandro · 2016-04-19T17:17:39Z

I have updated the Flickity Webpack instructions to use resolve.alias rather than imports loader.

// In your config file, webpack.config.js, add these resolve aliases.
module.exports = {
  resolve: {
    alias: {
      'eventEmitter/EventEmitter': 'wolfy87-eventemitter/EventEmitter',
      'get-style-property/get-style-property': 'desandro-get-style-property/get-style-property',
      'matches-selector/matches-selector': 'desandro-matches-selector/matches-selector',
      'classie/classie': 'desandro-classie/classie'
    }
  }
};

These aliases will not be required in the next major version of Flickity, v2.

davepullen19 · 2016-04-19T17:38:15Z

Thanks.
I tried this as you mentioned it above, but it won't get it working for the deep folder structure.
Again, my folders only go that deep. Importing Flickty on the entry file works fine.

Here is my config file:

import webpack from 'webpack'
import path from 'path'
import lost from 'lost'
import autoprefixer from 'autoprefixer'
import normalizer from 'postcss-normalize'

export default {
    context: path.join(__dirname, 'src/js'),
    entry: [
        'webpack-hot-middleware/client?reload=true',
      './index.js'
    ],
    output: {
      path: path.join(__dirname, '/public/'),
      filename: 'bundle.js',
      publicPath: '/public/'
    },
    plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
    module: {
        loaders: [{
          test: /\.js?$/,
          exclude: /node_modules/,
          loader: 'babel'
        }, { 
            test: /\.json$/, 
            loader: 'json-loader' 
        }, { 
      test: /\.scss$/, 
      loader: 'style-loader!css-loader!postcss-loader!sass-loader'
    }]
    },
  postcss: [
    lost, 
    autoprefixer,
    normalizer
  ],
  resolve: {
    alias: {
      'eventEmitter/EventEmitter': 'wolfy87-eventemitter/EventEmitter',
      'get-style-property/get-style-property': 'desandro-get-style-property/get-style-property',
      'matches-selector/matches-selector': 'desandro-matches-selector/matches-selector',
      'classie/classie': 'desandro-classie/classie'
    }
  }
}

adamduncan · 2016-04-26T15:44:35Z

Moving to webpack's resolve.alias as @desandro mentioned in #225 (comment) has resolved my 'Module not found' errors when using npm3.

I was still getting undefined exports.EventEmitter errors in the browser, even once webpack had compiled successfully. If you also include the module.loaders.test suggested by @nickhudkins #225 (comment), then the scope of this seems to set correctly to window in all cases.

davepullen19 · 2016-04-26T16:16:31Z

how strange. I've tried both of the fixes together, and still get the undefined window variable when importing it into any file that is not the entry file. would you be able to share your config file to see if i have anything glaringly wrong? i imagine you will be using flickity a few folder levels dow
thanks

adamduncan · 2016-04-26T16:51:19Z

@gitpullen, including these module and resolve properties got mine back on track:

module.exports = {
  module: {
    loaders: [{
      test: /(flickity|fizzy-ui-utils|get-size|unipointer)/,
      loader: 'imports?define=>false&this=>window'
    }]
  },
  resolve: {
    alias: {
      'eventEmitter/EventEmitter': 'wolfy87-eventemitter/EventEmitter',
      'get-style-property/get-style-property': 'desandro-get-style-property/get-style-property',
      'matches-selector/matches-selector': 'desandro-matches-selector/matches-selector',
      'classie/classie': 'desandro-classie/classie'
    }
  }
};

davepullen19 · 2016-04-27T08:33:07Z

Cheers.
So I realised it's because it's rendering the components on the server, so of course window doesn't exit.
There's a related issue here - #353

desandro · 2016-07-11T20:34:35Z

Flickity v2 is out now and has much improved Webpack integration. No more config required. You can npm install flickity and var Flickity = require('flickity') without any issue. See Flickity - Webpack for details.

desandro · 2016-08-16T19:26:24Z

I'm now closing this issue as resolved. If you run into an issue with Webpack and Flickity, please open a new issue.

lmartins · 2018-01-30T08:22:27Z

@desandro the workarounds above still relevant for flickity-as-nav-for though.

zslabs · 2018-03-21T17:41:28Z

@lmartins @desandro Have an example of what I'd need to make https://github.com/metafizzy/flickity-fullscreen work with es6 imports? The webpack error looks like it's looking side of flickity-fullscreen for a folder called flickity instead of looking a directory-level up.

ERROR in ./node_modules/flickity-fullscreen/fullscreen.js
Module not found: Error: Can't resolve './flickity' in '/Users/zach/Sites/le/node_modules/flickity-fullscreen'

/Users/zach/Sites/le/node_modules/flickity-fullscreen/flickity doesn't exist
[/Users/zach/Sites/le/node_modules/flickity-fullscreen/flickity]
[/Users/zach/Sites/le/node_modules/flickity-fullscreen/flickity.js]
[/Users/zach/Sites/le/node_modules/flickity-fullscreen/flickity.json]
[/Users/zach/Sites/le/node_modules/flickity-fullscreen/flickity]

Tried with and without the imports-loader (which doesn't seem like it should be needed anymore).

Was attempting to use it like so:

import Flickity from 'flickity-fullscreen';

export default function gallery() {
  const $headerCarousel = document.querySelector('.header-carousel');

  // eslint-disable-next-line no-unused-vars
  const flickity = new Flickity($headerCarousel, {
    freeScroll: true,
    fullscreen: true,
    lazyLoad: true,
    contain: true,
    prevNextButtons: false,
    pageDots: false,
  });
}

desandro · 2018-03-21T18:36:44Z

@zslabs Thanks for catching this bug. Looks like the module definitions should be:

// AMD 
'flickity/js/index'
// CommonJS
'flickity'

I'll add this fix in the next release for flickity-fullscreen and flickity-hash in the next week.

zslabs · 2018-03-21T23:08:35Z

@desandro Ah that's great! Thanks so much - was definitely throwing me for a loop 😏

camaech · 2018-03-26T15:23:39Z

I'm getting this error:

/node_modules/flickity/js/index.js:39
})( window, function factory( Flickity ) {
ReferenceError: window is not defined
at Object. (/vagrant/sites/roastar.com/node_modules/flickity/js/index.js:39:5)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object. (/webpack.mix.js:4:16)
at Module._compile (module.js:570:32)

When doing 'npm run dev'. Using Laravel webpack.mix.js so that may be part of the issue. Anyone else run into this error?

desandro · 2018-03-26T15:30:45Z

@camaech Flickity requires a browser environment. If you are trying to run Flickity server side, you'll need to skip over loading it as it requires window and document and all that good stuff.

camaech · 2018-03-26T15:52:15Z

When I use the instructions here (https://flickity.metafizzy.co/api.html#flickity-setjquery), I get the same error. Window is not defined. Not sure what else to try.

desandro · 2018-03-26T16:24:36Z

@camaech See #353 for possible solution.

#1, metafizzy/flickity#225

desandro · 2018-03-27T19:14:00Z

Fixes for fullscreen-flickity and flickity-hash has been released.

This issue is now pretty old, covering deprecated instructions which can mislead new users. I'm locking the issue as such. Please open a new issue if you run into trouble with Flickity and Webpack.

prewk closed this as completed Aug 26, 2015

desandro reopened this Oct 2, 2015

desandro added a commit to metafizzy/flickity-docs that referenced this issue Nov 17, 2015

Add Webpack. Ref metafizzy/flickity#225

b48224d

desandro added a commit to metafizzy/flickity-docs that referenced this issue Mar 24, 2016

📝 Webpack use resolve alias

6d5fc8e

Ref metafizzy/flickity#225

desandro added this to the v2 milestone Jul 11, 2016

desandro closed this as completed Aug 16, 2016

benjamincharity mentioned this issue Aug 28, 2016

Look into supporting Flickity v2 benjamincharity/angular-flickity#50

Closed

desandro added a commit to metafizzy/flickity-fullscreen that referenced this issue Mar 27, 2018

fix module definition; v1.0.1

a80ad59

#1, metafizzy/flickity#225

metafizzy locked as resolved and limited conversation to collaborators Mar 27, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Loading with webpack #225

Loading with webpack #225

prewk commented Aug 25, 2015

prewk commented Aug 26, 2015

johnhornsby commented Sep 6, 2015

PaulTondeur commented Oct 1, 2015

prewk commented Oct 1, 2015

PaulTondeur commented Oct 1, 2015

prewk commented Oct 1, 2015

PaulTondeur commented Oct 1, 2015

benbonnet commented Nov 16, 2015

prewk commented Nov 16, 2015

benbonnet commented Nov 16, 2015

prewk commented Nov 16, 2015

desandro commented Nov 17, 2015

nickhudkins commented Nov 18, 2015

homerjam commented Jan 7, 2016

johjacb commented Feb 17, 2016

davepullen19 commented Apr 19, 2016

desandro commented Apr 19, 2016 •

edited

Loading

davepullen19 commented Apr 19, 2016 •

edited

Loading

adamduncan commented Apr 26, 2016

davepullen19 commented Apr 26, 2016

adamduncan commented Apr 26, 2016

davepullen19 commented Apr 27, 2016

desandro commented Jul 11, 2016

desandro commented Aug 16, 2016

lmartins commented Jan 30, 2018

zslabs commented Mar 21, 2018 •

edited

Loading

desandro commented Mar 21, 2018

zslabs commented Mar 21, 2018

camaech commented Mar 26, 2018 •

edited

Loading

desandro commented Mar 26, 2018

camaech commented Mar 26, 2018

desandro commented Mar 26, 2018

desandro commented Mar 27, 2018

Loading with webpack #225

Loading with webpack #225

Comments

prewk commented Aug 25, 2015

prewk commented Aug 26, 2015

johnhornsby commented Sep 6, 2015

PaulTondeur commented Oct 1, 2015

prewk commented Oct 1, 2015

PaulTondeur commented Oct 1, 2015

prewk commented Oct 1, 2015

PaulTondeur commented Oct 1, 2015

benbonnet commented Nov 16, 2015

prewk commented Nov 16, 2015

benbonnet commented Nov 16, 2015

prewk commented Nov 16, 2015

desandro commented Nov 17, 2015

nickhudkins commented Nov 18, 2015

homerjam commented Jan 7, 2016

johjacb commented Feb 17, 2016

davepullen19 commented Apr 19, 2016

desandro commented Apr 19, 2016 • edited Loading

davepullen19 commented Apr 19, 2016 • edited Loading

adamduncan commented Apr 26, 2016

davepullen19 commented Apr 26, 2016

adamduncan commented Apr 26, 2016

davepullen19 commented Apr 27, 2016

desandro commented Jul 11, 2016

desandro commented Aug 16, 2016

lmartins commented Jan 30, 2018

zslabs commented Mar 21, 2018 • edited Loading

desandro commented Mar 21, 2018

zslabs commented Mar 21, 2018

camaech commented Mar 26, 2018 • edited Loading

desandro commented Mar 26, 2018

camaech commented Mar 26, 2018

desandro commented Mar 26, 2018

desandro commented Mar 27, 2018

desandro commented Apr 19, 2016 •

edited

Loading

davepullen19 commented Apr 19, 2016 •

edited

Loading

zslabs commented Mar 21, 2018 •

edited

Loading

camaech commented Mar 26, 2018 •

edited

Loading