I'm trying to import a library inside my bundle and I try in every way, but everytime I get an error.
The library is Justified-Gallery but sometimes this happen also with other library and I have to understand where is the issue.
I'm using webpacker with Rails.
This is my entry point, and lightGallery, another library I'm using, is working.
import 'lightgallery/scss/lightgallery-bundle'
// init vendor
import lightGallery from 'lightgallery'
import lgThumbnail from 'lightgallery/plugins/thumbnail'
import lgZoom from 'lightgallery/plugins/zoom'
window.lgZoom = lgZoom
window.lgThumbnail = lgThumbnail
window.lightGallery = lightGallery
require('justifiedGallery')
// init global user javascript
import './js/init.js';
Init.js is my main script
import NavbarSingleTon, { Navbar } from './navbar';
import GallerySingleTon, { Gallery } from './gallery';
(function init() {
document.addEventListener('DOMContentLoaded', () => {
Navbar.init();
Gallery.init();
});
}());
And finally this is my gallery.js
export class Gallery {
constructor($el) {
$el.justifiedGallery({
captions: false,
lastRow: "hide",
rowHeight: 180,
margins: 5
})
.on("jg.complete", function () {
window.lightGallery(
document.getElementById("dmove_gallery"),
{
autoplayFirstVideo: false,
pager: false,
galleryId: "dmove",
plugins: [lgZoom, lgThumbnail],
mobileSettings: {
controls: false,
showCloseIcon: false,
download: false,
rotate: false
}
}
);
});
}
static init() {
$(".gallery-container").each((i, el) => new Gallery($(el)));
}
}
The error I have in console is
gallery.js:5 Uncaught TypeError: $(...).justifiedGallery is not a function
I try to understand why, and require('justifiedGallery') require this script
I try with
import justifiedGallery from 'justifiedGallery'
window.justifiedGallery = justifiedGallery
But nothing... I cannot solve this issue