Unable to resolve Masonry in Meteor 1.3

Could some kindly person out there please share how we’re now supposed to use Masonry in a Meteor project?

Upon upgrade from 1.2 to 1.3, Masonry broke horribly.

I ran the recommended command to install the other necessary npm packages (outlayer, ev-emitter, etc. etc.), which seem to be configured correctly now, but Meteor complains at the terminal:

Unable to resolve some modules:

  "./item" in /Users/shindig/2_projects/meteor/omgcast/client/js/masonry.pkgd.min.js
(web.browser)

As a result, masonry is not available at the client side, and if I try importing the script the site fails to load altogether.

I’ve tried a variety of folders to put the masonry.pkgd.min.js file in, but always get this error. Using meteor npm install masonry-layout doesn’t work. The official Meteor migration guide and application structure docs aren’t helping, either. I’ve updated npm, so the versions are all current.

Apparently, this issue has come up in Webpack, and been resolved there: https://github.com/desandro/masonry/issues/679, but the fix isn’t working for this Meteor user. The kludges they recommend earlier in that thread involving loader-utils are over my head, and I don’t know if they can even be applied to Meteor.

Add on top of it all the confusion of trying to deal with a new package architecture (npm/ES2016 modules), and I’m at a loss. Please, somebody help, this is driving me nuts.

Try this package. I am using it and its loading everything fine on the client-side.

1 Like

Thank you, @Inmunhoz!! That works a treat.

I do still wonder what the problem with this node module is, but I’ll take any fix. Thanks again.

Awesome! Glad to help! :slight_smile:

I have it working on a project of mine. In my package.json, I have:

"masonry-layout": "*"

I import it like this

import Masonry from 'masonry-layout';

And initialize it in code like this:

this.msnry = new Masonry(this.galleryElement, {
  itemSelector: '.js-image'
});

After an npm install, see if that works.