Bootstrap.min.js: 6 Ошибка при отсутствии: для выпадающего списка Bootstrap требуется Popper.js
Внезапно я начал получать ошибку, когда пытаюсь открыть раскрывающееся меню:
bootstrap.min.js:6 Uncaught Error: Bootstrap dropdown require Popper.js (https://popper.js.org)
at bootstrap.min.js:6
at bootstrap.min.js:6
at bootstrap.min.js:6
Я использую стандартный файл начальной загрузки
<script src="https://getbootstrap.com/dist/js/bootstrap.min.js">
Что-нибудь изменилось в bootstrap, я должен позаботиться?
Порядок загрузки файлов происходит
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="{{ STATIC_URL }}/static/jquery/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="{{ STATIC_URL }}/static/jquery/jquery-ui.js"></script>
<script src="https://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
<script src="https://getbootstrap.com/assets/js/vendor/holder.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="https://getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js"></script>
Ответы
Ответ 1
Вы читали введение Bootstrap? https://getbootstrap.com/docs/4.0/getting-started/introduction/#quick-start
Вы должны добавить несколько скриптов, чтобы полностью начать загрузку. Важно, чтобы вы включили их в этом точном порядке. Popper.js является одним из них:
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
Ответ 2
Bootstrap 4 еще не является зрелым инструментом. Часть потребности в другом плагине для работы еще более сложна, особенно для разработчиков, которые некоторое время использовали Bootstrap. Я видел много способов устранить ошибку, но не все работают для всех. Я думаю, что лучший и самый чистый способ работы с Bootstrap 4. Среди установочных файлов Bootstrap есть один с именем "bootstrap.bundle.js"
который уже поставляется с включенным Поппером.
Ответ 3
Для начальной загрузки 4 и позже используйте этот файл:
/lib/bootstrap/dist/js/bootstrap.bundle.min.js
Вместо этого:
/lib/bootstrap/dist/js/bootstrap.min.js
Ответ 4
Для правильной работы Bootstrap Beta вы должны поместить сценарии в следующем порядке.
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
Ответ 5
включайте popper.js перед bootstrap.min.js
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.0.4/popper.js"></script>
используйте эту ссылку, чтобы получить поппер
Ответ 6
используйте эту версию popper:
popper.min.js
Ответ 7
Как указано здесь, вы должны использовать скрипт в подкаталоге UMD, в моем случае
bundles.Add(new ScriptBundle("~/bundles/projectbundle").Include(
"~/Scripts/umd/popper.js",
"~/Scripts/bootstrap.js",
"~/Scripts/respond.js",
"~/Scripts/summernote-bs4.js"));
В частности это: "~/Scripts/umd/popper.js",
Ответ 8
У меня была эта проблема с проектом MVC, и вот как я ее исправил.
- Откройте BundleConfig.cs
-
Найти:
bundles.Add(new ScriptBundle ("~/bundles/bootstrap"). Include ("~/Scripts/bootstrap.js"));
Изменить на:
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include("~/Scripts/bootstrap.bundle.min.js"));
Это установит файл пакета для загрузки. Это уже в правильном порядке. Вам просто нужно убедиться, что вы отображаете этот пакет в своем представлении.
Ответ 9
В моем случае я использую пакеты Visual Studio и Nuget, потому что они дублируют библиотеки, находящиеся в одной папке с jQuery, а другие в папке umd. Удаление javascript файлов popper с того же уровня, что и jQuery, и обращение к popper.js в папке umd устранили мою проблему, и я могу правильно видеть всплывающие подсказки.
Ответ 10
При переносе шаблона .html в WordPress я обнаружил, что этот "требуемый поппер" регулярно появляется:)
Для меня это произошло по двум причинам: и ошибка консоли может быть обманчива:
Ошибка в консоли может отправить вас по неверному пути. Это не может быть реальной проблемой. Первой причиной для меня был порядок order, в котором вы установили файлы .js для загрузки. В html легко разместите их в том же порядке, что и шаблон темы. В Wordpress вам нужно ставить их в правильном порядке, а также устанавливать приоритет, если они не отображаются в правильном порядке,
Второе - это файлы .js в заголовке или нижнем колонтитуле. Перемещение их в нижний колонтитул может решить проблему - для меня это произошло после целого дня попыток отладить проблему. Обычно это не имеет значения, но для сложной страницы с большим количеством js-библиотек это возможно!
Ответ 11
У меня была та же ошибка, и я просто хотел поделиться своим решением.
Оказалось, что минимизированная версия popper содержит код в той же строке, что и комментарий, и поэтому весь код был закомментирован.
Я просто нажал клавишу ввода после фактического комментария, чтобы код был в новой строке, а затем он работал нормально.
Ответ 12
Я столкнулся с этой проблемой, затем я поместил свой выпадающий список в теге nav.
У меня так получилось.