Webpack issue with isotope-packery

[brooksco]

This is a similar issue to #979, but specific to the isotope-packery plugin. When I run webpack, I get the following error:

ERROR in ./node_modules/isotope-packery/packery-mode.js
Module not found: Error: Can't resolve 'isotope/js/layout-mode' in '/app/cms/node_modules/isotope-packery'
 @ ./node_modules/isotope-packery/packery-mode.js 13:4-17:15
 @ ./app/javascript/packs/application.js

In that application.js file, I'm requiring isotope-layout and isotope-packery like:

var Isotope = require('isotope-layout');
var IsotopePackery = require('isotope-packery');

I am also trying to alias as mentioned in the other issue, with this in my config:

...
    resolve: {
        alias: {
            'masonry': 'masonry-layout',
            'isotope': 'isotope-layout',
            'isotope/js/layout-mode': 'isotope-layout/js/layoutmode'
        }
    }

Everything seems to be working with isotope-layout, but I'm a bit baffled how to properly incorporate packery, and it isn't mentioned in the webpack docs here https://isotope.metafizzy.co/extras.html#webpack how to include the plugin.

[desandro]

Thanks for submitting this issue. I'm not able to run into this issue.

Install Isotope & isotope-packery

npm install isotope-layout isotope-packery

Create a script

// main.js
var Isotope = require('isotope-layout');
require('isotope-packery');

var iso = new Isotope('.grid', {
  layoutMode: 'packery'
});

Then run Webpack

webpack main.js bundle.js

No need for config with resolve and alias.

[brooksco]

Thanks for the directions. I'm still running into what I think is the same issue, with a slightly different error in the console:

packery-mode.js:14 Uncaught Error: Cannot find module "isotope/js/layout-mode"

Looking inside the packery js, it's this piece that's causing the error:

  if ( typeof define == 'function' && define.amd ) {
    // AMD
    define( [
        'isotope/js/layout-mode',
        'packery/js/packery'
      ],

Which makes me wonder if the problem is that it's looking for isotope/js when the node_modules directory is actually isotope-layout/js. Is there something here I'm missing?

FYI I'm using the webpacker gem in Rails 5.1, in case that might resolve this somewhat differently.

[desandro]

Okay, I've released packery layout mode v2.0.1, which now uses isotope-layout package name in its source. Please try updating and report back any issues.

[homerjam]

Hi @desandro

I'm posting here as it's vaguely related - I'm having an issue with 3.0.6 and packery mode. Using the below method I get an error saying No layout mode: packery, however with 3.0.5 everything is fine??

FWIW I've looked at the commit history and nothing springs out.

Thanks, James

// main.js
var Isotope = require('isotope-layout');
require('isotope-packery');

var iso = new Isotope('.grid', {
  layoutMode: 'packery'
});

[desandro]

@homerjam Thanks for reporting this issue. I was unable to reproduce your issue. Double-check you have isotope-layout v3.0.6 and isotope-packery v2.0.1

[jrgd]

@homerjam @desandro same here; I can confirm both 3.0.6 and 2.0.1 are in use. installed using yarn yarn add isotope-layout isotope-packery building using webpack yarn build on a roots-sage9 wp but without any luck (Error: No layout mode: packery); 3.0.5 is generating the same error. Nuking the node_modules and yarn install again won't change the outcome :/

[Ojay]

Yeah I've exactly the same problem as @jrgd - have tried using various version combinations of both isotope-packery and isotope-layout all without any joy... still getting Error: No layout mode: packery.

[gtwebsite]

Is there any solution? Got same issue