При підключенні Bootstrap не працює Popper (Правильне Рішення)

від

у

У розробці веб-додатків іноді виникають проблеми з коректною роботою компонентів Bootstrap. Однією з частих помилок є непрацюючі компоненти та повідомлення про помилку у консолі типу “Uncaught TypeError: i.createPopper is not a function”. Якщо ви підключили bootstrap і виявили що деякі компоненти не працюють, а в консолі помилка такого типу.

Uncaught TypeError: i.createPopper is not a function
    at fe._createPopper (dropdown.js:241:27)
    at fe.show (dropdown.js:139:10)
    at fe.toggle (dropdown.js:121:49)
    at HTMLButtonElement.<anonymous> (dropdown.js:446:38)
    at HTMLDocument.s (event-handler.js:118:19)

Тоді ця стаття для вас.

Чому так сталось?

Скоріш за все річ у тому, що ви підключили bootstrap в ваш проєкт таким чином. Здається проблема викликана почерговістю завантаження скриптів.

<link rel="stylesheet" href="bootstrap.min.css">
<script src="bootstrap.min.js"></script>

Як вирішити?

При підключенні Bootstrap через CDN бачимо зазвичай що використовується скрипт bootstrap.bundle.min.js. Тому також пробуємо підключити його, що дасть нам підключення усіх необхідних залежностей, а також допомагає уникнути конфліктів з іншими бібліотеками або скриптами на сторінці. Загалом, таке підключення може бути доречне для розв’язання і інших проблем з компонентами Bootstrap та забезпечення належної роботи скриптів.

Тому сміло пишемо так, і дивимось чи зникла помилка з консолі

<link rel="stylesheet" href="bootstrap.min.css">
<script src="bootstrap.bundle.min.js"></script>

Додатково

Якщо вам цікаво отримати більше інформації по цій темі, тоді рекомендую відвідати офіційну сторінку Bootstrap:

https://getbootstrap.com/docs/5.0/components/popovers/


Коментарі

Залишити відповідь