Блог

Главная - Вопросы по программированию - Всплывающая подсказка начальной загрузки не работает с jquery.slim при импорте через webpack

Всплывающая подсказка начальной загрузки не работает с jquery.slim при импорте через webpack

#javascript #jquery #twitter-bootstrap #webpack #bootstrap-4

Вопрос:

Я установил через npm bootstrap 4.6.0 и jquery 3.6.0.

Этот код работает:

 import jQuery from "jquery/dist/jquery";
import "bootstrap/dist/js/bootstrap";
    
(function ($) {
    "use strict";   
    $("[data-toggle='tooltip']").tooltip()
})(jQuery);

Вместо этого этот код не работает, с ошибкой Uncaught TypeError: $(...).tooltip is not a function

Обратите внимание, что единственная разница заключается в том, что вместо jquery используется jquery slim.

 import jQuery from "jquery/dist/jquery.slim";
import "bootstrap/dist/js/bootstrap";
    
(function ($) {
    "use strict";   
    $("[data-toggle='tooltip']").tooltip()
})(jQuery);

Другие функции начальной загрузки (например, свернуть) работают даже с slim.

Похоже, по какой-то причине bootstrap не загружает некоторые функции, такие как всплывающая подсказка (также пытался использовать scrollspy, та же проблема)

Я также пытался console.log($.fn) , и на самом деле с помощью jquery slim я не могу найти кучу функций…

Комментарии:

1. У вас popper.js установлена. Я почти уверен, что всплывающие подсказки работают только с popper.js . (убедитесь, что это указано выше bootstrap.min.js )

2. Вы случайно не настроили ранее ProvidePlugin (веб-пакет) для jquery? Настройте это для slim.

3. @Gunnarhawk я установил popper.js и я предполагаю, что он включен компонентами начальной загрузки (в противном случае первый пример кода не работал бы).

4. @ChristianGollhardt я имею в виду именно то, чтобы избежать плагина. Мне нужно получить jquery в некоторых файлах и jquery slim в других файлах

5. Вы можете избежать этого, но должны смириться с тем фактом, что сломанные модули (например, плагины jquery) не будут работать. $(...).tooltip

Ответ №1:

Согласно официальной документации Всплывающие подсказки начальной загрузки:

Подсказки основаны на сторонней библиотеке Popper.js для позиционирования. Вы должны включить popper.min.js до того, как bootstrap.js или использовать bootstrap.bundle.min.js / bootstrap.bundle.js который содержит Popper.js для того, чтобы подсказки работали!

Поэтому вам нужно установить его между вашим jQuery и начальной загрузкой. Или вы можете просто установить bootstrap.bundle.min.js и bootstrap.bundle.js который уже содержит Popper.js.

Метки: