teelou teelou - 8 months ago 132
Node.js Question

Masonry does not work with jQuery in ES6?

How can I use masonry-layout with ES6?


'use strict';

import $ from 'jquery';
import Masonry from 'masonry-layout';

class Grid {
loadMasonry() {
window.addEventListener("load", () => {
// options
itemSelector: '.grid-item',
percentPosition: true,
// gutter: 10,
// columnWidth: 200

I have this error:

Grid.js:9 Uncaught TypeError: (0 , _jquery2.default)(...).masonry is
not a function

I have installed it with npm following its guide:

npm install masonry-layout

Any ideas why and how to resolve this?


This is how I call the class:

import Grid from './Grid';

document.addEventListener("DOMContentLoaded", function(event) {
var g = new Grid();



Using it as a jquery plugin requires more setup: you need to install a jquery-bridget library.

Then, here is a sample code on how to tie it all together from the documentation page:

var $ = require('jquery');
var jQueryBridget = require('jquery-bridget');
var Masonry = require('masonry-layout');
// make Masonry a jQuery plugin
jQueryBridget( 'masonry', Masonry, $ );
// now you can use $().masonry()
  columnWidth: 80