Ошибка Bootstrap 4 "Раскрывающийся список Bootstrap требует Popper.js", с Aurelia CLI и Require.js

У меня возникают проблемы при настройке бета-версии Bootstrap 4 в приложении Aurelia CLI (v0.31.1) с помощью requirejs и использованием TypeScript. После того, как я попробовал несколько вариантов конфигурации, я продолжаю получать следующую ошибку консоли:

Uncaught Ошибка: выпадающий Bootstrap требует Popper.js

Вот шаги для воспроизведения. Сначала установите пакеты:

$ npm install --save jquery bootstrap@4.0.0-beta popper.js

Далее я настроил aurelia.json:

  "jquery",
  {
    "name": "popper.js",
    "path": "../node_modules/popper.js/dist/umd",
    "main": "popper"
  },
  {
    "name": "bootstrap",
    "path": "../node_modules/bootstrap/dist",
    "main": "js/bootstrap.min",
    "deps": [
      "jquery",
      "popper.js"
    ],
    "exports": "$",
    "resources": [
      "css/bootstrap.css"
    ]
  }

Обратите внимание, что в конфиге выше:

  • popper.js зарегистрирован до начальной загрузки
  • модуль UMD используется
  • popper.js устанавливается как зависимость для начальной загрузки, рядом с jquery

Наконец, в моем app.ts:

import 'bootstrap';

С этой конфигурацией, построение с использованием au build работает отлично. Но после запуска, используя au run --watch Я получаю следующие ошибки консоли:

Uncaught Ошибка: для раскрывающегося списка начальной загрузки требуется Popper.js ( https://popper.js.org/) (defaults.js: 19)
Uncaught Ошибка: для раскрывающегося списка начальной загрузки требуется Popper.js ( https://popper.js.org/) (bootstrap.min.js: 6)
... чуть дальше:
Uncaught TypeError: plugin.load не является функцией в модуле. (defaults.js:19)

К сожалению, в документации по Bootstrap 4 упоминаются только инструкции в веб-пакете. Так же, как и на канале Gitter.im Aurelia, и на Stackru. Я не могу найти образцы относительно Aurelia CLI с Require.js. И, наконец, Google покажет только примеры для встраивания альфа-версий (которые основаны на "привязывании", а не "поппере").

Подобные вопросы о SO, которые имеют ту же ошибку, но не применимы к моей ситуации:

Итак, мой вопрос: как я могу настроить Bootstrap 4 с Popper.js в CLI-приложении Aurelia (используя Require.js, а не Webpack)?

Благодарю.

Источник

5 ответов

Решение

Поппер заменил Тетера в бета-версии.

Таким образом, вам нужно поменять привязь с помощью popper (или просто добавить ее, если у вас никогда не было альфа) в раздел prepend вашего файла aurelia.json. (Убедитесь, что вы ссылаетесь на версию UMD, показанную ниже)

"prepend": [
   ...
          "node_modules/jquery/dist/jquery.js",
          "node_modules/popper.js/dist/umd/popper.min.js",
   ...
     ]

Вам также потребуется пакет, как и ожидалось, что-то вроде этого:

      {
        "name": "bootstrap4",
        "path": "../node_modules/bootstrap/dist",
        "main": "js/bootstrap.min",
        "deps": [
          "jquery"
        ],
        "exports": "$",
        "resources": [
          "css/bootstrap.css"
        ]
      }

= Добавление =

В отличие от привязи, поппер, кажется, не нуждается в добавлении. Таким образом, вы можете включить его как любую другую зависимость с

 {
     "name": "popper.js",
     "path": "../node_modules/popper.js/dist/umd",
     "main": "popper.min"
 },
Источник

Я удалил popper.js и использовал версию, встроенную в bs4, используя js/bootstrap.bundle.min вместо js/bootstrap.min

  "jquery",
  {
    "name": "bootstrap",
    "path": "../node_modules/bootstrap/dist",
    "main": "js/bootstrap.bundle.min",
    "deps": ["jquery"],
    "exports": "$",
    "resources": [
      "css/bootstrap.css"
    ]
  },
Источник

Добавьте в свой код.

<!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
Источник

Использование комплектной версии BS4 работало для меня следующим образом:

Удалить поппер npm uninstall popper.js

Обновление до BS4 или позже npm install bootstrap --save

Убедитесь, что jquery установлен npm install bootstrap --save

Отредактируйте `.angular-cli.json', чтобы включить jquery и связанный BS4

   "scripts": [
    "../node_modules/jquery/dist/jquery.slim.min.js",
    "../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
   ],
Источник

В новом bootstrap 4 вы можете просто включить это:

<script type="text/javascript" src="/assets/vendor/bootstrap/dist/js/bootstrap.bundle.min.js">
</script>

Popper.js уже включен в этот файл. Проверьте раскрывающиеся списки документации начальной загрузки:https://getbootstrap.com/docs/4.0/components/dropdowns/

PS: Конечно, вам нужно установить bootstrap 4! Возможно, это не совсем ваш ответ, но он может сильно помочь другим людям, которые не используют Aurelia CLI и Require.js.

Источник

Начиная с финальной версии начальной загрузки 4.0 ниже приведен рабочий конф для начальной загрузки с поппером.

//file; aurelia_project/aurelia.json
"dependencies": [   
    ...
    ... // other dependencies
    ...

   "text",
   "jquery",
   {
     "name": "popper.js",
     "path": "../node_modules/popper.js/dist/umd",
     "main": "popper.min"
   },
   {
     "name": "bootstrap",
     "path": "../node_modules/bootstrap/dist",
     "main": "js/bootstrap.min",
     "deps": ["jquery"],
     "exports": "$",
     "resources": [
       "css/bootstrap.css"
     ]
   },
...
... // remaining dependencies
...
],

Это работает с последней версией aurelia & bootstrap (по состоянию на 2018-февраль) без использования метода prepend

Источник
Другие вопросы по тегам