Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Loading packery with requireJS #20

Closed
hjujah opened this Issue · 17 comments

10 participants

@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
Owner

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
Owner

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
Owner

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?

@hejhi

+1 - would be so nifty to have

@jrolfs jrolfs referenced this issue
Closed

Added AMD support #63

@desandro
Owner

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 desandro referenced this issue from a commit in metafizzy/packery-docs
@desandro desandro add docs for RequireJS b7cac1c
@desandro
Owner

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 desandro closed this
@desandro desandro referenced this issue from a commit in metafizzy/packery-docs
@desandro desandro make packery.pkgd.js with RequireJS
update docs
Ref metafizzy/packery#20
ced2ea5
@desandro
Owner

Good news! :smile_cat: 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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.