Masonry.js failing on load. Cannot call 'create' of undefined (Outerlayer) in Wordpress

Question

So I've got a strange problem that I can't seem to find anywhere else, regarding masonry.js.

I've got the latest (3.10) version and I'm including it in my wordpress theme's functions.php file as so:

function enqueue ()
{
    wp_register_script( 'masonry', get_stylesheet_directory_uri() . '/js/masonry.js', array( 'jquery' ) );
    wp_enqueue_script( 'masonry' );
}

add_action( 'wp_enqueue_scripts', 'enqueue');

Which is loading the script fine. As it is now, I'm not doing anything else with it, but the script is failing:

Uncaught TypeError: Cannot call method 'create' of undefined masonry.js?ver=3.5.2:37

Seems like it cannot call create on the window.Outerlayer as it doesnt exist.

Here's the code in question, starting at line 34 from the masonry.js:

// used for AMD definition and requires
function masonryDefinition( Outlayer, getSize ) {
  // create an Outlayer layout class
  var Masonry = Outlayer.create('masonry');

  Masonry.prototype._resetLayout = function() {
    this.getSize();
    this._getMeasurement( 'columnWidth', 'outerWidth' );
    this._getMeasurement( 'gutter', 'outerWidth' );
    this.measureColumns();

    // reset column Y
    var i = this.cols;
    this.colYs = [];
    while (i--) {
      this.colYs.push( 0 );
    }

    this.maxY = 0;
  };

I've tried enqueueing the script in different ways, as well as pulling it in only when $(document).ready() (which I believe wordpress' enqueue_script does anyway?).

So, does anyone have any ideas what the problem or conflict could be here? Or has anyone experienced anything similar?

(I'm using jQuery 1.83, though masonry shouldn't require jquery according to the site.)

Answer 1

I had this exact problem. My guess is that you're using just the raw masonry.js file from github. This version of masonry requires a few other plugins to work correctly.

Specifically, you're getting this error because you don't have Outlayer installed. If you're just looking to get masonry up and running, you should grab the full production package from the masonry website here. It includes the necessary plugins.

Hope this helps!