# Error when masonry installed with bower + gulp

**URL:** https://discourse.roots.io/t/error-when-masonry-installed-with-bower-gulp/3476
**Category:** sage
**Tags:** gulp
**Created:** 2015-04-09T23:27:57Z
**Posts:** 13

## Post 1 by @junkmyfunk — 2015-04-09T23:27:57Z

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…

---

## Post 2 by @kalenjohnson — 2015-04-09T23:31:17Z

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.

---

## Post 3 by @austin — 2015-04-09T23:47:42Z

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
```

![](https://discourse.roots.io/uploads/default/1867/945492256020c7fd.png)

---

## Post 4 by @junkmyfunk — 2015-04-11T18:36:18Z

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"]
    }
  },
```

---

## Post 5 by @eballeste — 2015-05-22T01:27:17Z

```
"exclude": {
    "bower": ["outlayer", "doc-ready", "fizzy-ui-utils", "get-style-property", "get-size", "matches-selector", "eventEmitter", "eventie"]
  }
```

---

## Post 7 by @austin — 2015-07-08T15:38:28Z

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

---

## Post 8 by @jakus — 2015-11-24T01:08:06Z

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

---

## Post 9 by @carlosfaria — 2016-02-24T11:49:35Z

You guys are awesome!!

---

## Post 10 by @WhereBeTheDan — 2017-02-15T15:39:33Z

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

---

## Post 11 by @markorapaic — 2017-02-23T04:12:56Z

Thanks mate, this worked for me too.

---

## Post 12 by @mvh89 — 2019-08-13T12:29:01Z

THanks, this worked for me!

---

## Post 13 by @strarsis — 2019-08-13T14:07:51Z

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

> **[magic-grid](https://www.npmjs.com/package/magic-grid)**
>
> Super lightweight javascript library for dynamic grid layouts.