Bootstrap 4 popper未定義

Question

我正試圖獲得一個下拉列表，每當我點擊按鈕時我得到TypeError: popper is undefined 。

我嘗試導入bundle而不是bootstrap

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

我嘗試先導入jquery

import "jquery";
import "bootstrap";

我也試過導入popper

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

我還嘗試在任何其他腳本之前從CDN中包含popper

<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();

我的問題與建議的不同，因為我解釋說我已經嘗試了所有建議的解決方案，但都沒有效果。

Answer 1

嘗試導入此訂單：

jQuery的
波普爾
引導

例如：

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

Answer 2

解：

您可以通過導入使用捆綁的bootstrap popper

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

請參閱此處的文檔。

或者使用popper的UDM版本，請參閱下面的詳細信息。

使用popper的步驟

我喜歡包經理。 所以這里：

npm init

只要對所有內容說“是”

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

我用index.html文件創建了兩個文件夾js和css，如下所示：

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

然后，我將位於node_modules中的各個庫中的dist文件夾中的文件復制到css和js文件夾中。 除了popper之外， 使用位於dist / udm文件夾中的popper.js文件或popper.min.js文件

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-server通過運行

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>

作品。

實施的版本是：

bootstrap ：4.2.1
jquery ：3.3.1
popper.js ：1.14.6

Bootstrap 4 popper未定義

問題描述

2 個解決方案

解決方案1
2 2019-01-28 08:32:03

解決方案2
1 已采納 2019-01-28 09:00:16

Bootstrap 4 popper未定義

問題描述

2 個解決方案

解決方案1 2 2019-01-28 08:32:03

解決方案2 1 已采納 2019-01-28 09:00:16

解決方案1
2 2019-01-28 08:32:03

解決方案2
1 已采納 2019-01-28 09:00:16