Bootstrap 4 поппер не определено - PullRequest
Новая
       32

Bootstrap 4 поппер не определено

0 голосов
/ 28 января 2019

Я пытаюсь запустить раскрывающийся список, и всякий раз, когда я нажимаю на кнопку, я получаю TypeError: popper is undefined.

Я пытался импортировать пакет вместо bootstrap

// import "bootstrap";
import 'bootstrap/dist/js/bootstrap.bundle.js';

Я пытался импортировать jquery first 

import "jquery";
import "bootstrap";

Я также пытался импортировать popper 

import "popper.js/dist/umd/popper.min.js";
import "jquery";
import "bootstrap";

Я также пытался включить popper из CDN перед любыми другими скриптами 

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

И я попробовал практически любую комбинацию импорта, упомянутую выше, все еще получая эту ошибку, даже когда я могу получить доступ к Popper в консоли. 

<div class="d-flex justify-content-between dropdown luri-eayq">
   <a href="/messages" class="btn btn-light flex-1 py-3 rounded-0">
      Messages
   </a>
   <a href="/phonebook" class="btn btn-light flex-1 py-3 rounded-0">
      Phonebook
   </a>
   <button id="dd" class="btn btn-light flex-1 py-3 rounded-0 mt-0" data-toggle="dropwdown">
      More
   </button>
   <div class="dropdown-menu"><a class="dropdown-item" href="/problems">Problems</a></div>
</div>

Затем я вызываю следующее, так как это динамическисгенерированный элемент 

$("#dd").dropdown();

Мой вопрос отличается от предложенного, потому что я объясняю, что я уже попробовал все предложенные решения, и ни одно из них не сработало.

Ответы [ 2 ]

0 голосов
/ 28 января 2019

Решение:

Вы можете использовать пакетный загрузчик, импортировав 

<script src="/js/bootstrap.bundle.min.js"></script>

См. Документацию здесь .

Или используйте UDM версию popper, см. Подробности ниже.

Шаги по использованию popper

Мне нравятся менеджеры пакетов.Итак, вот так: 

npm init

Просто скажите да всем .. 

npm install bootstrap --save
npm install jquery --save
npm install popper.js --save

Я создал две папки js и css с файлом index.html следующим образом: 

 index.html
 package.json
 package-lock.json
 |_ js
 |_ css
 |_ node_modules
     |_ bootstrap
       |_ dist
     |_ jquery
       |_ dist
     |_ popper.js
       |_ dist
          |_udm
          |_esm

Затем я скопировал файлы из папки dist в различные библиотеки, расположенные в node_modules, в папки css и js.За исключением popper, использует файл popper.js или файл popper.min.js, расположенный в папке dist / udm

Содержимое файла index.html выглядит следующим образом:

<!DOCTYPE html>
<html class="no-js" lang="en">
    <head>
        <title>Popper Test</title>
        <link rel="stylesheet" href="/css/bootstrap.min.css">
    </head>

    <body>

            <div class="dropdown">
                    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      Dropdown button
                    </button>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                      <a class="dropdown-item" href="#">Action</a>
                      <a class="dropdown-item" href="#">Another action</a>
                      <a class="dropdown-item" href="#">Something else here</a>
                    </div>
                  </div>

        <script src="/js/jquery.min.js"></script>
        <script src="/js/popper.js"></script>
        <script src="/js/bootstrap.min.js"></script>
        <!-- <script src="/js/bootstrap.bundle.min.js"></script> -->
    </body>
</html>

Для запуска примера, который я использовал: http-сервер найден здесь Запустив 

npm install http-server -g
http-server

Если вы не использовали версию UDM, то Открытие Chrome и переход на http://127.0.0.1:8080. Поднимает мою страницу, нажимая F12, а затем попытка нажать на выпадающий список завершается неудачно с сообщением об ошибке: 

bootstrap.min.js:6 Uncaught TypeError: Bootstrap's dropdowns require Popper.js (https://popper.js.org/)
    at c.t.toggle (bootstrap.min.js:6)
    at HTMLButtonElement.<anonymous> (bootstrap.min.js:6)
    at Function.each (jquery.min.js:2)
    at w.fn.init.each (jquery.min.js:2)
    at w.fn.init.c._jQueryInterface [as dropdown] (bootstrap.min.js:6)
    at HTMLButtonElement.<anonymous> (bootstrap.min.js:6)
    at HTMLDocument.dispatch (jquery.min.js:2)
    at HTMLDocument.y.handle (jquery.min.js:2)

Либо используйте UDM версия, описанная выше, или связанная версия начальной загрузки путем переключения с: 

<script src="/js/jquery.min.js"></script>
<script src="/js/popper.js"></script>
<script src="/js/bootstrap.min.js"></script>
<!-- <script src="/js/bootstrap.bundle.min.js"></script> -->

на: 

<script src="/js/jquery.min.js"></script>
<!-- <script src="/js/popper.js"></script> -->
<!-- <script src="/js/bootstrap.min.js"></script>-->
<script src="/js/bootstrap.bundle.min.js"></script>

Работы.

Реализованные версии:

  • начальная загрузка : 4.2.1
  • jquery : 3.3.1
  • popper.js :1.14.6
0 голосов
/ 28 января 2019

попробуйте импортировать этот заказ:

  1. jquery
  2. popper
  3. bootstrap

например: 

<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
...