У розробці веб-додатків іноді виникають проблеми з коректною роботою компонентів 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:
Залишити відповідь