Error when masonry installed with bower + gulp

sage
1

After doing 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:42 console
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…

2 Likes
2

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.

1 Like
3

You can also verify the order of everything being brought in by opening an interactive node session:

node

Then

require('asset-builder')('./assets/manifest.json').globs.js

2 Likes
4

OK, that was very helpful advice - thanks both! Overriding main with 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:

"dependencies": {
  "main.js": {
    "files": [
      "scripts/main.js"
    ],
    "main": true,
    "exclude": {
      "bower": ["outlayer"]
    }
  },
7 Likes
5 
"exclude": {
    "bower": ["outlayer", "doc-ready", "fizzy-ui-utils", "get-style-property", "get-size", "matches-selector", "eventEmitter", "eventie"]
  }
2 Likes
7

If anyone gets a sec please contribute the masonry solution back to https://github.com/austinpray/asset-builder/wiki/User-Contributed-Examples

1 Like
8

@junkmyfunk’s solution worked, I just misread a portion of his second response… Cool!

9

You guys are awesome!!

10

Instead of excluding each of isotope/masonry’s dependencies in your manifest, you can also pass "dependencies": null in your bower override

1 Like
11

Thanks mate, this worked for me too.

12

THanks, this worked for me!

13

FWIW, I use the very lightweight magic-grid library instead: