title: requireJS with JQuery, Masonry, & ImagesLoaded: Object [object Object] has no method 'imagesLoaded'
body: <p>RequireJS newbie here.  Trying to convert some JQuery code I had working fine in the old way to work w/ RequireJS.</p>
  
  <p>Header of my page loads three JS files via script tags -- require.js itself, my require.cfg.js, and boot/main.js with the site-specific functionality.</p>
  
  <p>Relevant require.cfg.js excerpt:</p>
  
  <pre><code>,paths: {
      'boot': 'src/boot'
      ,'jquery': 'lib/jquery.min'
      ,'jquery.masonry': 'lib/plugins/masonry.pkgd.min'
      ,'jquery.imagesloaded': 'lib/plugins/imagesloaded.pkgd.min'
  }
  
  ,shim: {
      'jquery': {
          exports: 'jQuery'
      }
      ,'jquery.masonry': ['jquery']
      ,'jquery.imagesloaded': ['jquery']
  }
  </code></pre>
  
  <p>boot/main.js:</p>
  
  <pre><code>require([
  'jquery',
  'jquery.masonry',
  'jquery.imagesloaded',
  ], function($) {
  
      // The following code worked just fine when I included it in the header of the page as-is
  $(function() {
  
      var $container = $('#container');
      // This doesn't work
      $container.imagesLoaded(function() {
                      // Neither does this
              $('#container').masonry({itemSelector : '.item',});
          });
  
  });
  
  });
  </code></pre>
  
  <p>I can confirm that all of these JS files are being found and loaded by the browser.  And I confirm that if I do:</p>
  
  <pre><code>require([
  'jquery',
  'jquery.masonry',
  'jquery.imagesloaded',
  ], function($, Masonry, ImagesLoad) {
  </code></pre>
  
  <p>the Masonry and ImagesLoaded variables are set correctly.... but I don't want to proceed w/o jQuery</p>
  
  <p>But when I try to call .imagesLoaded() and .masonry() on the JQuery container object, I get:</p>
  
  <p><strong>Uncaught TypeError: Object [object Object] has no method 'imagesLoaded'</strong> </p>
  
  <p>And if I comment out the imagesLoaded line, I get:</p>
  
  <p><strong>Uncaught TypeError: Object [object Object] has no method 'masonry'</strong> </p>
  
  <p>Not sure what I'm doing wrong here...?  From what I've read in other StackOverflow questions, the code looks correct to me...?</p>
  
  <p>Thanks!</p>
  
  <p><strong>Update:</strong></p>
  
  <p>If I use this code the non-JQuery way like so, it works:</p>
  
  <pre><code>        var container = document.querySelector('#container');
          imagesLoaded(container, function() {
              var msnry = new Masonry( container, {
                  itemSelector: '.item',
              });
          });
  </code></pre>