bootstrap.min.js:6 未捕獲錯誤：Bootstrap 下拉菜單需要 Popper.js

Question

當我嘗試打開下拉菜單時，突然出現錯誤：

 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">

引導程序中的任何更改我都必須注意？

我正在加載文件的順序如下

<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>

Answer 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>

Answer 2

用

js/bootstrap.bundle.min.js

代替

js/bootstrap.min.js

Answer 3

Bootstrap 4 還不是一個成熟的工具。 需要另一個插件才能工作的部分更加復雜，尤其是對於已經使用 Bootstrap 一段時間的開發人員而言。 我已經看到了許多消除錯誤的方法，但並非所有方法都適用於每個人。 我認為使用 Bootstrap 4 的最佳和最干凈的方法是在 Bootstrap 安裝文件中，有一個名為“bootstrap.bundle.js”的文件已經包含在 Popper 中。

Answer 4

在 bootstrap.min.js 之前包含 popper.js

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

使用此鏈接獲取 popper

Answer 5

為了使 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>

Answer 6

正如這里所指出的，在我的情況下，您必須使用 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”，

Answer 7

我在 MVC 項目中遇到了這個問題，這是我修復它的方法。

1. 打開BundleConfig.cs

2. 找 ：

   bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include("~/Scripts/bootstrap.js"));

   改成：

    bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include("~/Scripts/bootstrap.bundle.min.js"));

這將設置要加載的包文件。 它已經是正確的順序。 您只需要確保在視圖中呈現此包。

Answer 8

你需要安裝 popperjs 和 bootstrap 來擺脫這個錯誤。注意，如果你使用 "bootstrap": "^4.4.1" 和 @popperjs/core v2.x 組合，bootstrap 可能不支持 popperjs 版本。 所以降級你的版本。

選項 1： npm install popper.js@^1.12.9 --save

並在 jquery 和 bootstrap 腳本之間添加以下腳本。

"node_modules/popper.js/dist/umd/popper.min.js" ,

選項 2：將以下腳本標記添加到 index.html

<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

Answer 9

在我的情況下，我使用 Visual Studio 和 Nuget 包失敗，因為在與 jQuery 相同的文件夾中復制了一個庫，另一個在文件夾 umd 中。 通過從與 jQuery 相同的級別刪除 popper javascript 文件並參考 umd 文件夾中的 popper.js 修復了我的問題，我可以正確地看到工具提示。

Answer 10

我遇到了這個問題，然后我將下拉列表放在導航標簽中。 以這種方式為我工作。

Answer 11

在將 .html 模板移動到 wordpress 模板時，我發現這個“需要 popper”會定期彈出:)

它發生在我身上的兩個原因：控制台錯誤可能具有欺騙性：

1. 控制台中的錯誤可能會讓您走上錯誤的道路。 這可能不是真正的問題。 我的第一個原因是您設置 .js 文件加載的順序。 在 html easy 中，將它們按與主題模板相同的順序排列。 在 Wordpress 中，您需要以正確的順序將它們入隊，但如果它們沒有以正確的順序出現，也要設置優先級，

2. 第二件事是頁眉或頁腳中的 .js 文件。 將它們移到頁腳可以解決問題 - 經過一天的嘗試調試問題后，它對我來說確實如此。 通常無關緊要，但對於具有大量 js 庫的復雜頁面，它可能會！

Answer 12

我有同樣的錯誤，只是想分享我的解決方案。 結果證明，popper 的縮小版本的代碼與注釋在同一行，因此整個代碼都被注釋掉了。 我只是在實際注釋后按 Enter 鍵，所以代碼在新行上，然后它工作正常。