Блог

Главная - Вопросы по программированию - Неперехваченная ошибка типа: $(…). не является функцией при импорте библиотеки с помощью Webpack

Неперехваченная ошибка типа: $(…). не является функцией при импорте библиотеки с помощью Webpack

#javascript #webpack

Вопрос:

Я пытаюсь импортировать библиотеку в свой пакет, и я пытаюсь всеми способами, но каждый раз получаю ошибку.

Библиотека не является галереей, но иногда это происходит и с другой библиотекой, и я должен понять, в чем проблема.

Я использую webpacker с рельсами.

Это моя точка входа, и lightGallery еще одна библиотека , которой я пользуюсь, работает.

 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 это мой основной сценарий

 import NavbarSingleTon, { Navbar } from './navbar';
import GallerySingleTon, { Gallery } from './gallery';

(function init() {
  document.addEventListener('DOMContentLoaded', () => {
    Navbar.init();
    Gallery.init();
  });
}());

И, наконец, это мой 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

Я пытаюсь понять, почему и require('justifiedGallery' ) требуется этот скрипт

Я пытаюсь с

 import justifiedGallery from 'justifiedGallery'
window.justifiedGallery = justifiedGallery

Но ничего…
Я не могу решить эту проблему

Метки: