Uncaught TypeError: (...). Модальный не является функцией в ES6

Question

Мне нужна еще пара глаз и знаний, так как я новичок в ES6.

Вот мой index.js файл, в котором я пытаюсь использовать fullcalendar.io:

import $ from 'jquery';
import 'bootstrap';
import 'fullcalendar';
$(function() {
    $('#calendar').fullCalendar({
     // ... 

     eventClick: function(event, jsEvent, view) {

         $('#calendarEventModal').modal();
     }
    })     
})

Проблема в том, что когда я запускаю этот код и нажимаю на событие, я получаю следующую ошибку:

Uncaught TypeError: (0 , _jquery2.default)(...).modal is not a function

Что я делаю не так?Чего не хватает ?

Answer 1

Существует как минимум два случая, в которых $('#calendarEventModal') не имеет modal() метода:

• #calendarEventModal не соответствует элементу в DOM во время вызова метода (чтобы проверить, что вы можете использовать:

if ($('#calendarEventModal').is('#calendarEventModal')) {
  console.log('i has found zee DOM element'); 
  $('#calendarEventModal').modal();
} else {
  console.log('no joy. `#calendarEventModal` missing in action...'); 
}

... очевидно, вам не нужен console.log()).
Проще говоря: у вас есть элемент с id="calendarEventModal"в вашем DOM, удерживая содержимое того, что вы хотите видеть в вашем модале в то время, когда .modal() называется?
Размещено ли оно, случайно, внутри #calendar?Если это так, возможно, вы должны взять его.Я не знаю, что .fullCalendar() выполняет с элементом, но, скорее всего, он заменяет его innerHTML какой-то сгенерированной разметкой, таким образом уничтожая ваш #calendarEventModal.

• импортированный пакет 'bootstrap'.нет метода modal() - возможно создание пользовательских пакетов Bootstrap, не включая все модули.Однако он включен по умолчанию, поэтому, если вы не урезали пакет, скорее всего, вы столкнулись с первым случаем.