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 键，所以代码在新行上，然后它工作正常。