bootstrap.min.js:6 未捕获错误：引导下拉菜单需要 Popper.js答案

【问题标题】：bootstrap.min.js:6 Uncaught Error: Bootstrap dropdown require Popper.jsbootstrap.min.js:6 未捕获错误：引导下拉菜单需要 Popper.js
【发布时间】：2018-01-21 13:05:09
【问题描述】：

当我尝试打开下拉菜单时突然出现错误：

 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>

【问题讨论】：

Bootstrap 3 navbar doesn't work anymore的可能重复

标签： javascript twitter-bootstrap

【解决方案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>

【讨论】：

是的，您是正确的，谢谢。然而，它是新事物。因为它总是在没有那些额外的包含的情况下工作。
如果我切换到 CDN，它也会由于引导更新而发生，它也可以工作 bootstrapcdn.com
它曾经是需要的 tether.js。
这个确切的顺序在 Angular 5 angular-cli.json 中为我修复了。
我的链接顺序是这样的（jquery js、popper js、bootstrap js），但它仍然给我同样的错误。

【解决方案2】：

代替：

js/bootstrap.min.js

使用：

js/bootstrap.bundle.min.js

【讨论】：

这可以工作，无需在 index.html 中添加任何脚本，也无需在 SPW 应用程序中添加其他节点模块。
这是最快、最简单的修复方法，如果您遇到 popper 错误，请使用包含 popper 的包。注意：你仍然需要在 bootstrap.bundle.min.js 之前包含 jQuery，因为 jQuery 不是包的一部分。
是的，它对我来说真的很好用，我刚刚将 {"node_modules/bootstrap/dist/js/bootstrap.min.js"} 更改为 {"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"} ，它运行良好，谢谢

【解决方案3】：

Bootstrap 4 还不是一个成熟的工具。需要另一个插件才能工作的部分更加复杂，特别是对于已经使用 Bootstrap 一段时间的开发人员而言。我已经看到了许多消除错误的方法，但并非所有方法都适用于所有人。我认为使用 Bootstrap 4 的最佳和最干净的方式。在 Bootstrap 安装文件中，有一个名为 "bootstrap.bundle.js" 已经包含在 Popper 中。

【讨论】：

转到：cdnjs.com/libraries/twitter-bootstrap 找到 cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/… 这对我有用
为我工作。谢谢。
你才是真正的英雄
完全英雄。这就是答案。
它可以工作，我们应该在引导js之前包含它，都在这里cdnjs.com/libraries/twitter-bootstrap

【解决方案4】：

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

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

使用此链接获取popper

【讨论】：

还必须放在 jquery/dist/jquery.min.js 上面对我有用，所以我有 Popper -then- jquery - 然后引导

【解决方案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>

【讨论】：

【解决方案6】：

正如here 指出的那样，在我的情况下，您必须使用 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”，

【讨论】：

这就是为我做的。我将我的与从上述答案复制的工作 CDN 进行了比较，这就是区别。

【解决方案7】：

我在一个 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"));
```

这将设置要加载的捆绑文件。它已经按正确的顺序排列。你只需要确保你在你的视图中渲染这个包。

【讨论】：

【解决方案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

【讨论】：

我做了选项 2。效果很好

【解决方案9】：

在我的情况下，我使用 Visual Studio 和 Nuget 包失败，因为在与 jQuery 相同的文件夹中复制了一个库，另一个在文件夹 umd 中。通过从与 jQuery 相同的级别删除 popper javascript 文件并引用 umd 文件夹中的 popper.js 解决了我的问题，我可以正确看到工具提示。

【讨论】：

【解决方案10】：

我遇到了这个问题，然后我把我的下拉菜单放在导航标签中。以这种方式为我工作。

【讨论】：

【解决方案11】：

在将 .html 模板移动到 wordpress 模板时，我发现这个“需要 popper”经常弹出 :)

发生在我身上的两个原因：控制台错误可能具有欺骗性：

控制台中的错误可能让您走错路。这可能不是真正的问题。我的第一个原因是您设置要加载的 .js 文件的顺序。在 html easy 中，将它们按照与主题模板相同的顺序放置。在 Wordpress 中，您需要以正确的顺序将它们排入队列，但如果它们没有以正确的顺序出现，也要设置优先级，
其次是 页眉或页脚中的 .js 文件。将它们移到页脚可以解决问题 - 经过一天的尝试调试问题后，它对我有用。通常没关系，但是对于一个有很多js库的复杂页面来说，可能！

【讨论】：

【解决方案12】：

我遇到了同样的错误，只是想分享我的解决方案。事实证明，缩小版的 popper 的代码与注释在同一行，因此整个代码都被注释掉了。我只是在实际注释后按下回车，所以代码在新行上，然后它工作正常。

【讨论】：