Решение ошибки: Bootstrap's JavaScript требует jQuery

Быстрый ответ

Чтобы избежать ошибки для работы JavaScript Bootstrap требуется jQuery, убедитесь, что jQuery загружается перед JS Bootstrap:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- Сначала подключаем jQuery -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <!-- Затем Bootstrap JS -->

Обратите внимание на совместимость версий jQuery и Bootstrap.

Порядок подключения скриптов в HTML

Последовательность загрузки DOM имеет значение

Порядок тегов <script> играет ключевую роль. jQuery должен быть расположен перед Bootstrap. Иначе неподходящее расположение приведет к ошибке Uncaught Error в JavaScript Bootstrap.

Подробнее об этом расскажет наш спикер на видео

Проверьте корректность путей

Убедитесь, что пути к файлам jQuery и Bootstrap правильно указаны. Используйте инструменты разработчика для контроля загрузки.

Сверьте версии

Важно правильно подобрать соответствующие версии Bootstrap и jQuery. Соответствие версий предотвратит возможные конфликты.

Работа с CDN и менеджерами пакетов

Используйте одинаковые CDN

Для того чтобы избежать расхождений, используйте один и тот же CDN для загрузки jQuery и Bootstrap.

Управление зависимостями с помощью npm или yarn

npm или yarn помогут вам настроить зависимости вашего проекта, включая автоматическую установку подходящих версий.

Решение типичных проблем

Избегите конфликтов между CommonJS и браузерным кодом

Применение модулей CommonJS может вызвать конфликты с jQuery, что приведет к ошибкам при использовании Bootstrap.

Особенности работы приложений Electron

Для стабильной работы jQuery в Electron установите параметр nodeIntegration на значение false.

Ручное указание объекта для jQuery

В некоторых сложных сценариях можно назначить объект window для jQuery:

window.jQuery = require('jquery'); // Присваиваем jQuery глобальному объекту window

Визуализация

Вот несложная аналогия с автомобилем:

Без топлива:   🚗 ❌ (не движется)
С автомобилем:   🚗 ✔️ (может двигаться)
Только топливо: ⛽ ❌ (не в состоянии двигаться)

Аналогия между Bootstrap и jQuery:

Bootstrap: 🚗 
jQuery:   ⛽

Bootstrap без jQuery: 🚗❌ (Ошибка: Bootstrap не может работать без jQuery)
Bootstrap с jQuery: 🚗➕⛽✔️ (Все работает отлично!)

Суть в том, что Bootstrap нуждается в jQuery как машина — в топливе.

Мониторинг консоли и проверка синтаксиса

Следите за ошибками в консоли

Обратите внимание на ошибки в консоли, по ним можно определить проблемы с подключением скриптов.

Проверьте синтаксис тегов script

Обнаружение и исправление синтаксических ошибок в тегах <script> помогает избегать непредвиденных ситуаций.

Принцип постепенного усовершенствования

Даже без использования JavaScript Bootstrap, обеспечьте сайту базовую функциональность.

Полезные материалы

1. JavaScript · Bootstrap — Детальное руководство по использованию jQuery с Bootstrap.
2. jQuery CDN — Соответствующая версия jQuery для работы Bootstrap.
3. javascript – jQuery UI Dialog – missing close icon – Stack Overflow — Обсуждение влияния jQuery на Bootstrap.
4. v5 без jQuery автор Johann-S · Pull Request #23586 · twbs/bootstrap · GitHub — Дискуссия о снижении зависимости Bootstrap от jQuery.
5. Browsers and devices · Bootstrap — Информация о совместимости Bootstrap и jQuery.
6. HTML script src Attribute — Руководство по подключению скриптов.
7. Migrating to v4 · Bootstrap — Подсказки по переходу на новую версию Bootstrap.