How to get it to work with ES6 Modules (if you're finding it isn't working)

[isabel-anastasiadis-boost]

When we switched from using Webpacker to Vite to bundle our javascript, the initialisation broke.

We were doing:

import 'justifiedGallery/dist/js/jquery.justifiedGallery'

document.addEventListener('DOMContentLoaded', () => {
  // do our initialisation
})

With Vite, it seems that a different code path gets hit, and the import returns a function that we need to call to bind justifiedGallery with jquery. So this worked for us:

import bindJustifiedGalleryToJQuery from 'justifiedGallery/dist/js/jquery.justifiedGallery'

// `jquery.justifiedGallery.js` exports this function on line 13.
// It takes a "root" (in case jquery isn't defined yet and it has to find it) and jquery.
// But if you provide jquery, then it doesn't need the root.
bindJustifiedGalleryToJQuery(null, $);

document.addEventListener('DOMContentLoaded', () => {
  // do our initialisation
})

Not sure if this is the intended behaviour or not, but posting this in case other people run into similar problems.