Js: 6未捕获错误: Bootstrap 下拉菜单需要 Popper.js

当我试图打开下拉菜单时，突然出现了错误:

 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>
182527 次浏览
小开

在 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>
小开

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

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

用这个链接找到 Popper

小开

为了使 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>
小开

Bootstrap 4还不是一个成熟的工具。需要另一个插件工作的部分更加复杂，特别是对于已经使用 Bootstrap 一段时间的开发人员来说。我已经看到了许多消除错误的方法，但并非所有方法都适用于每个人。我认为使用 Bootstrap 4的最佳和最干净的方法。在 Bootstrap 安装文件中，有一个名为 < strong > < em > “ Bootstrap.bundle.js” 包括波普尔在内。

小开

正如指出的那样，在我的例子中，必须使用 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”,

小开

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

小开

我有这个问题与 MVC 项目，这里是我如何修复它。

  1. 打开 BundleConfig.cs

  2. 查找:

    添加(新的 ScriptBundle (“ ~/bundle/bootstrap”)。包括(“ ~/Scripts/bootstrap.js”) ;

    改为:

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

This will set the bundle file to load. It is already in the correct order. You just have to make sure that you are rendering this bundle in your view.

小开

而不是:

js/bootstrap.min.js

用途:

js/bootstrap.bundle.min.js
小开

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

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

  1. 控制台中的错误可以是 让你误入歧途。这可能不是真正的问题。对我来说第一个原因是 秩序在其中你已经设置了你的。要加载的 js 文件。在 html 中，将它们按照与主题模板相同的顺序放置。在 Wordpress 中，您需要按照正确的顺序排列它们，但是如果它们没有按照正确的顺序出现，您还需要设置一个优先级,

  2. 第二件事是。页眉或页脚中的 js 文件。将它们移动到页脚可以解决这个问题——对我来说，经过一天的调试，它解决了这个问题。通常没有关系，但是对于一个包含大量 js 库的复杂页面来说，可能有关系！

小开

我有同样的错误，只是想分享我的解决方案。 结果是，这个简化版的 popper 把代码和注释放在同一行，所以整个代码都被注释掉了。 我只是在实际注释后面按了回车键，这样代码就在一个新的行上，然后它就工作正常了。

小开

我正面临这个问题，然后我把我的下拉式导航标签。 对我来说就是这样。

小开

您需要安装 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

提交答案