bower install masonry --save and then running
gulp I can see masonry and its dependencies were compiled into
dist/main.js, which is great. However, there is a JS error when trying to load a page (this happens even when masonry is not being called or initialised):
Uncaught TypeError: Cannot read property 'Item' of undefined
outlayer.js:46 (anonymous function)
I presume something in the
gulpfile.js is causing this issue when including all of masonry’s dependencies but I have no idea where to start fixing this…
Masonry and Isotope are actually slightly different in how they are packaged up.
masonry.js is actually JUST masonry, but it has dependencies of it’s own.
If you want to get it working, set up an override in your
bower.json and point it to
dist/masonry.pkgd.js, this is masonry and all it’s compiled dependencies in one file.
You can also verify the order of everything being brought in by opening an interactive node session:
OK, that was very helpful advice - thanks both! Overriding
dist/masonry.pkgd.js worked but I was still getting the JS error. Thanks to @austin’s tip I could see asset-builder was still including all of masonry’s dependencies. Since I couldn’t find a way to tell Bower to ignore dependencies for a particular package, I added an exclude in
manifest.json which did the trick:
"bower": ["outlayer", "doc-ready", "fizzy-ui-utils", "get-style-property", "get-size", "matches-selector", "eventEmitter", "eventie"]
@junkmyfunk’s solution worked, I just misread a portion of his second response… Cool!
Instead of excluding each of isotope/masonry’s dependencies in your manifest, you can also pass
"dependencies": null in your bower override
Thanks mate, this worked for me too.
THanks, this worked for me!
FWIW, I use the very lightweight magic-grid library instead: