requireJS with JQuery, Masonry, & ImagesLoaded: Object [object Object] has no method 'imagesLoaded'

Question

RequireJS newbie here. Trying to convert some JQuery code I had working fine in the old way to work w/ RequireJS.

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.

Relevant require.cfg.js excerpt:

,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']
}

boot/main.js:

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',});
        });

});

});

I can confirm that all of these JS files are being found and loaded by the browser. And I confirm that if I do:

require([
'jquery',
'jquery.masonry',
'jquery.imagesloaded',
], function($, Masonry, ImagesLoad) {

the Masonry and ImagesLoaded variables are set correctly.... but I don't want to proceed w/o jQuery

But when I try to call .imagesLoaded() and .masonry() on the JQuery container object, I get:

Uncaught TypeError: Object [object Object] has no method 'imagesLoaded'

And if I comment out the imagesLoaded line, I get:

Uncaught TypeError: Object [object Object] has no method 'masonry'

Not sure what I'm doing wrong here...? From what I've read in other StackOverflow questions, the code looks correct to me...?

Thanks!

Update:

If I use this code the non-JQuery way like so, it works:

        var container = document.querySelector('#container');
        imagesLoaded(container, function() {
            var msnry = new Masonry( container, {
                itemSelector: '.item',
            });
        });

Answer 1

Try defining exports for each plugin in the shim too...

, paths: {
    boot: 'src/boot'
    , jquery: 'bower_components/jquery'
    , masonry: 'bower_components/masonry',
    , imagesloaded: 'bower_components/imagesloaded'
}
, shim: {
    jquery: {
        exports: 'jQuery'
    }
    , masonry: {
        deps : ['jquery'],
        exports : 'jQuery.masonry'
    }
    , imagesloaded: {
        deps : ['jquery'],
        exports : 'jQuery.imagesLoaded'
    }
}