Isotope.js and Webpack - possible?

Question

I'm trying to get my webpack setup working with isotope.js. The problem I'm running into is that when webpack goes to compile, it can't find a window and throws an error.

Tried the following:

In myfile.js

import Isotope from 'isotope-layout';

webpack.config.js

loaders: [{ test: /isotope-layout/, loader: 'imports?this=>window!isotope-layout' }

but it throws the following error:

/ipb/node_modules/lodash/index.js" as it exceeds the max of "100KB".

/Users/user/Development/ipb/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:206
                    throw e;
                          ^
ReferenceError: window is not defined
    at Object.<anonymous> (/Users/user/Development/ipb/node_modules/isotope-layout/js/isotope.js:60:4)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at DependenciesBlock.loadPitch (/Users/user/Development/ipb/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:193:17)
    at DependenciesBlock.loadPitch (/Users/user/Development/ipb/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:186:21)
    at DependenciesBlock.loadPitch (/Users/user/Development/ipb/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:223:61)

What am I doing wrong here, or what would be the better way to get this accomplished?

Answer 1

Try:

var $ = require('jquery');
var jQueryBridget = require('jquery-bridget');
var Isotope = require('isotope-layout');
// make Isotope a jQuery plugin
jQueryBridget( 'isotope', Isotope, $ );
// now you can use $().isotope()
$('.grid').isotope({// options...});

Answer 2

Try something along

var Isotope = require('imports?$=jquery!isotope-layout/dist/isotope.pkgd');

That seems to work for me. Note that this solution depends on imports-loader;

You can likely push this to your Webpack configuration rather than solving it inline. Just hoping this answer points you to the right direction.

Answer 3

2023 Update

@metafizzy, its 3 years and no update on isotope. Is it falling under abandoned projects. I don't know. Just my opinion. However, i feel it's a great project that should be supported. In case you want to use as i do, you can import it as Module loaders i.e. in webpack as follow:

Install
# yarn add isotope-layout

// main.js
var Isotope = require('isotope-layout');
var iso = new Isotope( '.grid', {
  // options...
});

Read more in the docs: https://isotope.metafizzy.co/extras.html#webpack If you run into error like: cannot find module globby/index.js, restart your app and run yarn install followed by yarn add isotope-layout.