Sage 9 and Masonry

sage
1

I’m having trouble importing Masonry in my new Sage 9 project. I’ve installed using yarn add masonry-layout, but when I do a import Masonry from 'masonry-layout'; in main.js I get the following response when trying to build assets:

ERROR in ./scripts/main.js

example/content/themes/dyrsrettigheter/assets/scripts/main.js
  4:8  error  'Masonry' is defined but never used  no-unused-vars

✖ 1 problem (1 error, 0 warnings)

 @ multi ./scripts/main.js ./styles/main.scss

ERROR in ./scripts/main.js
Module build failed: Error: Module failed because of a eslint error.

example/content/themes/dyrsrettigheter/assets/scripts/main.js
  4:8  error  'Masonry' is defined but never used  no-unused-vars

✖ 1 problem (1 error, 0 warnings)

I’m still pretty fresh at using Webpack, so sorry if I’m missing something obvious here.

1 Like
2

I’m not familiar with Masonry, but if you’re not using it as a class/function, but instead relying on it to bind itself to the global scope or jQuery or something, then you can just use the following:

import 'masonry-layout';
4

Yeah, that works, but I’m not sure how to initialise the plugin using vanilla js without the class, since Masonry suggest the following:

var msnry = new Masonry( '.grid', {
  columnWidth: 200,
  itemSelector: '.grid-item'
});
5

I guess you’d do something like…

import Masony from 'masonry-layout';

var msnry = new Masonry( '.grid', {
  columnWidth: 200,
  itemSelector: '.grid-item'
});
6

That’s exactly what I’m trying, which gives me the error above.

1 Like
8

Super late, but wanted to leave it here just for the record:

I was getting the same error with Swiper. I fixed it by importing the 3rd party library directly into the js file I’m was going to use it in. For example, if I’m running Masonry only on the home.js route, just import it before the exports.default inside that file. That’s it, no more errors.