Loading packery with requireJS

[hjujah]

Hi Desandro,

I am trying to load packery with requireJS, but I keep getting ,,Uncaught TypeError: Cannot read property 'prototype' of undefined " error message, even if packery is not initialized anywhere on the page. That's 486. row of packery.pkgd.js file.
Any help is appreciated. Thanks...

[desandro]

Yes, I need to test Packery with Require JS

[hjujah]

Ok, please let us know about the outcome...

[gobengo]

Part of the problem here is that the eventie and eventEmitter dependencies both include shim code that uses define to define the module when requirejs is loading it, and doesn't set a global window.EventEmitter.

However, Packery code depends on these libraries via eg window.EventEmitter. .. But that doesn't get set when loading the deps via requirejs. And RequireJS' shim config doesn't provide a way of forcing that to be set. That is, the shim config is completely ignored if the file, when loaded, uses define(factory). Argh.

@desandro Are you completely against using RequireJS for packery, if you can generate a build (w/ almond) that doesn't require clients to use RequireJS? Alternatively, could you wrap the 4 modules of packery in a UMD wrapper? https://github.com/umdjs/umd/blob/master/amdWeb.js

Right now I think the only option for RequireJS users to make this work is to intentionally pollute the global scope or include Packery deps outside of AMD. Or, what I'll likely do, copy and paste packery code into an amd-comatible module. But then I won't be able to incorporate new changes very easily.

I will buy an org license if @metafizzy can advise us to success here :)

[desandro]

Are you completely against using RequireJS for packery

Nope. I have been working on adding AMD support to all the dependencies and working up. This is a work in progress.

See eventie and getSize.

[gobengo]

Thanks for the response and the project itself, @desandro. Glad to hear support is coming! My project is here and defines an AMD module that gets access to Packery through assumed global scope. I'll watch this thread and update as I can to load via AMD. https://github.com/gobengo/streamhub-packery

Would you like any help? Perhaps in migrating any deps that you don't author?
Or should I just check back in a certain ETA?

[desandro]

Just keep watching this tracker.

[alexyoungs]

Brilliant to hear that AMD support is on the way for such a great library @desandro, thanks!

Have you got any sort of update on how far away it might be? Watching this thread with eager anticipation ;)

[sabarasaba]

Any news about this ?

[eabait]

Hi, we payed the licence and really need to support AMD through RequireJS. Is there an ETA for this fix?

[hjujah]

Any update on this?

[bobeagan]

++

[hejhi]

+1 - would be so nifty to have

[casoetan]

+1

[desandro]

I'm looking for feedback on how to best set up RequireJS dependencies in my components. Help me out! See https://github.com/desandro/requirejs-bower-homework

[desandro]

Support for RequireJS has been added in v1.1.0. See http://packery.metafizzy.co/appendix.html#requirejs

I realize it's a bit of a pain to install with Bower and set up config, but it's for the best!

Try it out and report back if you have any trouble.

[desandro]

Good news! 😸 packery.pkgd.js is now being built with RequireJS. This means you can require packery.pkgd.js and not have to worry about getting all the dependencies. Proper docs at packery.metafizzy.co/appendix.html#requirejs

---

Currently, the RequireJS optimizer outputs packery.pkgd.js with a named module masonry/masonry. This means you need to actually require two modules in order to use Masonry.

requirejs( [
  // require the file
  'path/to/packery.pkgd.js',
  // require the named module
  'packery/js/packery'
  // two parameters, packeryPkg is undefined
  // Packery is the working module
], function( packeryPkg, Packery ) {
  new Packery('#container');
});

One solution is to remove the naming of packery/js/packery

Please chime in if you have a preference either way.

[jmcgdz]

Sweet! I'll try it this weekend, thank you.