How to use Packery with Ember

Question

I just started ember and want to use packery as layouting library. The ember app has been created via ember new wep-app. Packery has been installed via npm install packery. According to ember dependency management, I can load Packery via app.import('node_modules/packery/js/packery.js')

How do I use packery now? The application.hbs looks like this

<div class="grid">
   <div class="grid-item">cdsc</div>
   <div class="grid-item grid-item--width2">...</div>
   <div class="grid-item">...</div>
</div>

But it seems not to work. In a similar question, someone mentions the creation of a component ember g component packery-grid, which should be filled accordingly

import Component from '@ember/component';

export default Component.extend({
   classNames: ['grid'], 
   didInsertElement() {
   this.$('.grid').packery({
       // options
       itemSelector: '.grid-item'
       });
   }
 }); 

Using a component, the application.hbs template should look like this:

{{#packery-grid}}
<div class="grid-item">cdsc</div>
<div class="grid-item grid-item--width2">...</div>
<div class="grid-item">...</div>
{{/packery-grid}}

However, this does not work either. What shall I do to have packery integrated into ember? I use ember 3.5.1.

EDIT: There is an ember component for packery as well, which does not work as well.

Answer 1

1. Looking at packery's github, I think that node_modules/packery/js/packery.js is a wrong path. Correct one should be node_modules/packery/dist/packery.pkgd.js. You need to restart ember serve after this change in order to rebuild js
2. You might need to replace this.$('.grid') with this.$()

Answer 2

Looks like packery is a jQuery plugin, and not a module. Modules typically are what get imported.

For jQuery plugins, you need to load them in a script tag, maybe from vendor or public folders. (I don't know if you can use a script tag in HTML from node_modules)

But I highly recommend you check out css grid, and not use packery. jQuery and jQuery plugins are unergonomic