Wiredep TypeError: Outlayer is undefined #618

ghost · 2014-10-31T09:31:26Z

TypeError: Outlayer is undefined

var Masonry = Outlayer.create('masonry');

desandro · 2014-10-31T11:34:44Z

Can you check you are using masonry.pkgd.js and not just masonry.js

ghost · 2014-11-03T06:38:58Z

/**

jQuery Masonry v2.1.07
A dynamic layout plugin for jQuery
The flip-side of CSS Floats
http://masonry.desandro.com
*
Licensed under the MIT license.
Copyright 2012 David DeSandro
_/
(function(a,b,c){"use strict";var d=b.event,e=b.event.handle?"handle":"dispatch",f;d.special.smartresize={setup:function(){b(this).bind("resize",d.special.smartresize.handler)},teardown:function(){b(this).unbind("resize",d.special.smartresize.handler)},handler:function(a,b){var c=this,g=arguments;a.type="smartresize",f&&clearTimeout(f),f=setTimeout(function(){d[e].apply(c,g)},b==="execAsap"?0:100)}},b.fn.smartresize=function(a){return a?this.bind("smartresize",a):this.trigger("smartresize",["execAsap"])},b.Mason=function(a,c){this.element=b(c),this._create(a),this._init()},b.Mason.settings={isResizable:!0,isAnimated:!1,animationOptions:{queue:!1,duration:500},gutterWidth:0,isRTL:!1,isFitWidth:!1,containerStyle:{position:"relative"}},b.Mason.prototype={_filterFindBricks:function(a){var b=this.options.itemSelector;return b?a.filter(b).add(a.find(b)):a},_getBricks:function(a){var b=this._filterFindBricks(a).css({position:"absolute"}).addClass("masonry-brick");return b},_create:function(c){this.options=b.extend(!0,{},b.Mason.settings,c),this.styleQueue=[];var d=this.element[0].style;this.originalStyle={height:d.height||""};var e=this.options.containerStyle;for(var f in e)this.originalStyle[f]=d[f]||"";this.element.css(e),this.horizontalDirection=this.options.isRTL?"right":"left";var g=this.element.css("padding-"+this.horizontalDirection),h=this.element.css("padding-top");this.offset={x:g?parseInt(g,10):0,y:h?parseInt(h,10):0},this.isFluid=this.options.columnWidth&&typeof this.options.columnWidth=="function";var i=this;setTimeout(function(){i.element.addClass("masonry")},0),this.options.isResizable&&b(a).bind("smartresize.masonry",function(){i.resize()}),this.reloadItems()},_init:function(a){this._getColumns(),this._reLayout(a)},option:function(a,c){b.isPlainObject(a)&&(this.options=b.extend(!0,this.options,a))},layout:function(a,b){for(var c=0,d=a.length;c<d;c++)this._placeBrick(a[c]);var e={};e.height=Math.max.apply(Math,this.colYs);if(this.options.isFitWidth){var f=0;c=this.cols;while(--c){if(this.colYs[c]!==0)break;f++}e.width=(this.cols-f)_this.columnWidth-this.options.gutterWidth}this.styleQueue.push({$el:this.element,style:e});var g=this.isLaidOut?this.options.isAnimated?"animate":"css":"css",h=this.options.animationOptions,i;for(c=0,d=this.styleQueue.length;c<d;c++)i=this.styleQueue[c],i.$elg;this.styleQueue=[],b&&b.call(a),this.isLaidOut=!0},_getColumns:function(){var a=this.options.isFitWidth?this.element.parent():this.element,b=a.width();this.columnWidth=this.isFluid?this.options.columnWidth(b):this.options.columnWidth||this.$bricks.outerWidth(!0)||b,this.columnWidth+=this.options.gutterWidth,this.cols=Math.floor((b+this.options.gutterWidth)/this.columnWidth),this.cols=Math.max(this.cols,1)},_placeBrick:function(a){var c=b(a),d,e,f,g,h;d=Math.ceil(c.outerWidth(!0)/this.columnWidth),d=Math.min(d,this.cols);if(d===1)f=this.colYs;else{e=this.cols+1-d,f=[];for(h=0;h<e;h++)g=this.colYs.slice(h,h+d),f[h]=Math.max.apply(Math,g)}var i=Math.min.apply(Math,f),j=0;for(var k=0,l=f.length;k<l;k++)if(f[k]===i){j=k;break}var m={top:i+this.offset.y};m[this.horizontalDirection]=this.columnWidth*j+this.offset.x,this.styleQueue.push({$el:c,style:m});var n=i+c.outerHeight(!0),o=this.cols+1-l;for(k=0;k<o;k++)this.colYs[j+k]=n},resize:function(){var a=this.cols;this._getColumns(),(this.isFluid||this.cols!==a)&&this._reLayout()},_reLayout:function(a){var b=this.cols;this.colYs=[];while(b--)this.colYs.push(0);this.layout(this.$bricks,a)},reloadItems:function(){this.$bricks=this._getBricks(this.element.children())},reload:function(a){this.reloadItems(),this._init(a)},appended:function(a,b,c){if(b){this._filterFindBricks(a).css({top:this.element.height()});var d=this;setTimeout(function(){d._appended(a,c)},1)}else this._appended(a,c)},_appended:function(a,b){var c=this.getBricks(a);this.$bricks=this.$bricks.add(c),this.layout(c,b)},remove:function(a){this.$bricks=this.$bricks.not(a),a.remove()},destroy:function(){this.$bricks.removeClass("masonry-brick").each(function(){this.style.position="",this.style.top="",this.style.left=""});var c=this.element[0].style;for(var d in this.originalStyle)c[d]=this.originalStyle[d];this.element.unbind(".masonry").removeClass("masonry").removeData("masonry"),b(a).unbind(".masonry")}},b.fn.imagesLoaded=function(a){function h(){a.call(c,d)}function i(a){var c=a.target;c.src!==f&&b.inArray(c,g)===-1&&(g.push(c),--e<=0&&(setTimeout(h),d.unbind(".imagesLoaded",i)))}var c=this,d=c.find("img").add(c.filter("img")),e=d.length,f="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==",g=[];return e||h(),d.bind("load.imagesLoaded error.imagesLoaded",i).each(function(){var a=this.src;this.src=f,this.src=a}),c};var g=function(b){a.console&&a.console.error(b)};b.fn.masonry=function(a){if(typeof a=="string"){var c=Array.prototype.slice.call(arguments,1);this.each(function(){var d=b.data(this,"masonry");if(!d){g("cannot call methods on masonry prior to initialization; attempted to call method '"+a+"'");return}if(!b.isFunction(d[a])||a.charAt(0)===""){g("no such method '"+a+"' for masonry instance");return}d[a].apply(d,c)})}else this.each(function(){var c=b.data(this,"masonry");c?(c.option(a||{}),c._init()):b.data(this,"masonry",new b.Mason(a,this))});return this}})(window,jQuery);

ghost · 2014-11-03T06:39:21Z

i had change use this code . it is work fine.
thank you

cyrus-za · 2014-11-21T09:20:48Z

Thanks desandro. I searched for this issue and immediately changed to .pkgd and it worked

poliveira89 · 2015-05-22T17:59:14Z

But If I use Masonry with Bower?

It will add these automatically:

...

    <script src="../bower_components/get-style-property/get-style-property.js"></script>
    <script src="../bower_components/get-size/get-size.js"></script>
    <script src="../bower_components/eventie/eventie.js"></script>
    <script src="../bower_components/doc-ready/doc-ready.js"></script>
    <script src="../bower_components/eventEmitter/EventEmitter.js"></script>
    <script src="../bower_components/matches-selector/matches-selector.js"></script>
    <script src="../bower_components/outlayer/item.js"></script>
    <script src="../bower_components/outlayer/outlayer.js"></script>
    <script src="../bower_components/masonry/masonry.js"></script>

...

But those errors still appears:

Uncaught TypeError: Cannot read property 'Item' of undefined (outlayer.js:42)
Uncaught TypeError: Cannot read property 'create' of undefined  (masonry.js:43)

On masonry.js:43 I got this: var Masonry = Outlayer.create('masonry');
And on outlayer.js:42 I got this:

    // browser global
    window.Outlayer = factory(
      window,
      window.eventie,
      window.EventEmitter,
      window.getSize,
      window.fizzyUIUtils,
      window.Outlayer.Item  //  !! this is the LINE 42 !!
    );

Schwankenson · 2015-06-06T22:14:24Z

I have the same issue as poliveira89 when installing with "bower install --save jquery.masonry"

Uncaught TypeError: Cannot read property 'Item' of undefined

in the code block

window.Outlayer = factory(
  window,
  window.eventie,
  window.EventEmitter,
  window.getSize,
  window.fizzyUIUtils,
  window.Outlayer.Item
);

Is there a workaround?

desandro · 2015-06-07T15:59:53Z

If you are using wiredep, then you're most likely missing outlayer/item.js in your config. See metafizzy/outlayer#33 (comment)

  "overrides": {
    "outlayer": {
      "main": [
        "item.js",
        "outlayer.js"
      ]
    }
  }

maija-brazen · 2015-08-31T08:03:52Z

For those who run into this issue while using roots/ sage – easiest solution is to add this to the main "overrides" section in the main bower.json file:

  "masonry": {
      "main": ["./dist/masonry.pkgd.js"],
      "dependencies": {}
    },

The entirety of the main theme bower.json file in my case then looks like this:

{
  "name": "sage",
  "homepage": "https://roots.io/sage/",
  "authors": [
    "Ben Word <ben@benword.com>"
  ],
  "license": "MIT",
  "private": true,
  "dependencies": {
    "modernizr": "2.8.2",
    "bootstrap-sass-official": "3.3.4",
    "matchHeight": "~0.6.0",
    "classie": "~1.0.1",
    "scrollMonitor": "~1.0.12",
    "masonry": "~3.3.2"
  },
  "overrides": {
    "modernizr": {
      "main": "./modernizr.js"
    },
    "masonry": {
      "main": ["./dist/masonry.pkgd.js"],
      "dependencies": {}
    },
    "bootstrap-sass-official": {
      "main": [
        "./assets/stylesheets/_bootstrap.scss",
        "./assets/javascripts/bootstrap/transition.js",
        "./assets/javascripts/bootstrap/alert.js",
        "./assets/javascripts/bootstrap/button.js",
        "./assets/javascripts/bootstrap/carousel.js",
        "./assets/javascripts/bootstrap/collapse.js",
        "./assets/javascripts/bootstrap/dropdown.js",
        "./assets/javascripts/bootstrap/modal.js",
        "./assets/javascripts/bootstrap/tooltip.js",
        "./assets/javascripts/bootstrap/popover.js",
        "./assets/javascripts/bootstrap/scrollspy.js",
        "./assets/javascripts/bootstrap/tab.js",
        "./assets/javascripts/bootstrap/affix.js",
        "./assets/fonts/bootstrap/glyphicons-halflings-regular.eot",
        "./assets/fonts/bootstrap/glyphicons-halflings-regular.svg",
        "./assets/fonts/bootstrap/glyphicons-halflings-regular.ttf",
        "./assets/fonts/bootstrap/glyphicons-halflings-regular.woff",
        "./assets/fonts/bootstrap/glyphicons-halflings-regular.woff2"
      ]
    }
  }
}

jonlambert · 2015-09-17T16:49:23Z

@maija-brazen You're a star

nickkeenan · 2015-10-27T17:48:17Z

@maija-brazen Highest of fives - thanks for the fix!

cwhite92 · 2015-11-15T14:54:23Z

@maija-brazen Thank you! 👍

mrdonado · 2016-03-21T20:43:17Z

@maija-brazen Thanks a lot! It did the trick for me too :)

PeterBujuSerenergy · 2016-10-14T09:30:43Z

This combined with the answers here
https://discourse.roots.io/t/error-when-masonry-installed-with-bower-gulp/3476/3
solved it ! Great stuff.

khraibani · 2018-03-14T15:55:51Z

For anyway using the new version of Masonry

"overrides": {
    "masonry-layout": {
      "main": ["./dist/masonry.pkgd.js"],
      "dependencies": {}
    },

    "imagesloaded": {
      "main": "imagesloaded.pkgd.js",
      "dependencies": {}
    }
  }

ghost closed this as completed Nov 3, 2014

pgrm mentioned this issue Jul 22, 2015

Wiredep TypeError: Cannot read property Item of undefined when using masonry with bower #727

Closed

monttda mentioned this issue Dec 2, 2015

Problem with rails-assets-masonry tenex/rails-assets#280

Closed

desandro changed the title ~~TypeError: Outlayer is undefined~~ Wiredep TypeError: Outlayer is undefined Mar 21, 2016

jserrao mentioned this issue Oct 24, 2016

Uncaught TypeError: Cannot read property 'createMethods' of undefined metafizzy/flickity-bg-lazyload#4

Closed

dsandstrom mentioned this issue Apr 7, 2017

Wrong info for masonry tenex/rails-assets#400

Closed

This issue was closed.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Wiredep TypeError: Outlayer is undefined #618

Wiredep TypeError: Outlayer is undefined #618

ghost commented Oct 31, 2014

desandro commented Oct 31, 2014

ghost commented Nov 3, 2014

ghost commented Nov 3, 2014

cyrus-za commented Nov 21, 2014

poliveira89 commented May 22, 2015

Schwankenson commented Jun 6, 2015

desandro commented Jun 7, 2015

maija-brazen commented Aug 31, 2015

jonlambert commented Sep 17, 2015

nickkeenan commented Oct 27, 2015

cwhite92 commented Nov 15, 2015

mrdonado commented Mar 21, 2016

PeterBujuSerenergy commented Oct 14, 2016

khraibani commented Mar 14, 2018

Wiredep TypeError: Outlayer is undefined #618

Wiredep TypeError: Outlayer is undefined #618

Comments

ghost commented Oct 31, 2014

desandro commented Oct 31, 2014

ghost commented Nov 3, 2014

ghost commented Nov 3, 2014

cyrus-za commented Nov 21, 2014

poliveira89 commented May 22, 2015

Schwankenson commented Jun 6, 2015

desandro commented Jun 7, 2015

maija-brazen commented Aug 31, 2015

jonlambert commented Sep 17, 2015

nickkeenan commented Oct 27, 2015

cwhite92 commented Nov 15, 2015

mrdonado commented Mar 21, 2016

PeterBujuSerenergy commented Oct 14, 2016

khraibani commented Mar 14, 2018