javascript - How do I import jQuery Masonry using ES6 modules?

I am trying to use this npm package

As per install instruction I ran:

npm install masonry-layout --save

Then in my file,

import '../../../node_modules/masonry-layout/dist/masonry.pkgd.min.js'

$('.blog-posts-container').masonry({
    // options ...
    itemSelector: '.card-blog',
    columnWidth: 200
})

I'm trying to import the package in my file and run it, but I get this error:

Uncaught TypeError: $(...).masonry is not a function

Im thinking there is something wrong with my import here. What am I doing wrong?

P.S. I am using webpack

I am trying to use this npm package https://www.npmjs./package/masonry-layout

As per install instruction I ran:

npm install masonry-layout --save

Then in my file,

import '../../../node_modules/masonry-layout/dist/masonry.pkgd.min.js'

$('.blog-posts-container').masonry({
    // options ...
    itemSelector: '.card-blog',
    columnWidth: 200
})

I'm trying to import the package in my file and run it, but I get this error:

Uncaught TypeError: $(...).masonry is not a function

Im thinking there is something wrong with my import here. What am I doing wrong?

P.S. I am using webpack

Share Improve this question edited Feb 15, 2018 at 7:28 James Hibbard 17.8k14 gold badges68 silver badges75 bronze badges asked Feb 12, 2018 at 13:30 eliHimself 771 silver badge10 bronze badges

Do you use any packager? Webpack, Rollup? Please add an appropriate tag to the question, that would help a lot. – rishat Commented Feb 12, 2018 at 13:32
@RishatMuhametshin Using Webpack – eliHimself Commented Feb 12, 2018 at 13:35
1 Possible duplicate of Managing jQuery plugin dependency in webpack – Igor Commented Feb 12, 2018 at 13:38

Add a ment |

1 Answer 1

Sorted by: Reset to default 10

To get this to work, you need to use jQueryBridget which makes jQuery plugin out of a constructor function.

Here's an example using the imagesloaded plugin to make sure masonry initializes after the images have loaded.

npm i -S jQueryBridget imagesLoaded

Then in app.js (or whatever):

import $ from 'jquery';
import Masonry from 'masonry-layout';
import jQueryBridget from 'jquery-bridget';
import imagesLoaded from 'imagesloaded';

jQueryBridget('masonry', Masonry, $);
jQueryBridget( 'imagesLoaded', imagesLoaded, $ );

const $container = $('#masonry-grid');

$container.imagesLoaded(() => {
  $container.masonry({
    columnWidth: 200,
    itemSelector: '.item',
  });
});

The above should be bundled (using Webpack) into bundle.js.

And for the sake of pleteness, here's the HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Masonry Madness</title>
</head>
<body>
  <div id="masonry-grid">
    <div class="item">
      <img src="https://s3.amazonaws./clarifai-img/demo/889/88940833.jpg">
    </div>
    <div class="item">
      <img src="https://s3.amazonaws./clarifai-img/demo/907/90775901.jpg">
    </div>
    <div class="item">
      <img src="https://s3.amazonaws./clarifai-img/demo/294/29489326.jpg">
    </div>
    <div class="item ">
      <img src="https://s3.amazonaws./clarifai-img/demo/100/100656385.jpg">
    </div>
    <div class="item ">
      <img src="https://s3.amazonaws./clarifai-img/demo/889/88940839.jpg">
    </div>
    <div class="item ">
      <img src="https://s3.amazonaws./clarifai-img/demo/111/111773987.jpg">
    </div>
    <div class="item ">
      <img src="https://s3.amazonaws./clarifai-img/demo/146/146371016.jpg">
    </div>
    <div class="item">
      <img src="https://s3.amazonaws./clarifai-img/demo/103/10313578.jpg">
    </div>
    <div class="item ">
      <img src="https://s3.amazonaws./clarifai-img/demo/554/55473337.jpg">
    </div>
    <div class="item ">
      <img src="https://s3.amazonaws./clarifai-img/demo/537/53727259.jpg">
    </div>
    <div class="item ">
      <img src="https://s3.amazonaws./clarifai-img/demo/111/111246515.jpg">
    </div>
    <div class="item">
      <img src="https://s3.amazonaws./clarifai-img/demo/461/46176355.jpg">
    </div>
  </div>

  <script src="bundle.js"></script>
</body>
</html>

HTH

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How do I import jQuery Masonry using ES6 modules? - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)