jquery widget not working with requireJS

[aadityataparia]

When I do

const Masonry = require("masonry-layout")
window.Masonry = Masonry

$().masonry doesn't work even when jquery is already added.

I think the problem is jquery-bridget is not available so it doesn't add the widget.

https://github.com/metafizzy/outlayer/blob/fc751c12a0448c89a9da7caa88dd35de0a789f08/outlayer.js#L889-L891

Solution

• add jquery-bridget as dependency
• require jquery-bridget in https://github.com/metafizzy/outlayer/blob/master/outlayer.js just like ev-emitter, etc.

https://github.com/metafizzy/outlayer/blob/fc751c12a0448c89a9da7caa88dd35de0a789f08/outlayer.js#L25-L31

Happy to hear, if there are any alternatives or if PR is invited.

[desandro]

Thanks for this suggestion. But the intention is that jQuery is optional. Adding jquery-bridget makes it mandatory, requiring that jQuery be added for all instances. I feel the best solution is to add jQuery Bridget separately. See related Webpack docs;

To use Masonry as a jQuery plugin with Webpack, you need to use jQuery Bridget

npm install jquery-bridget

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()
$('.grid').masonry({
  columnWidth: 80
});

[aadityataparia]

@desandro Thanks!