Fatal编程技术网
  • javascript/
  • Javascript bootstrap.min.js:6未捕获错误：引导下拉列表需要Popper.js

Javascript bootstrap.min.js:6未捕获错误：引导下拉列表需要Popper.js

javascript twitter-bootstrap

Javascript bootstrap.min.js:6未捕获错误：引导下拉列表需要Popper.js,javascript,twitter-bootstrap,Javascript,Twitter Bootstrap,当我试图打开下拉菜单时，突然出现错误： 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 我使用的是标准引导文件 bootstrap有什么变化吗？我必须脱掉它吗 我加载文件

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

 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
我使用的是标准引导文件

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>
在引导的介绍中，它说明了需要添加哪些导入

您必须添加一些脚本才能使引导完全工作。重要的是你要把它们按正确的顺序放进去。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

为了使引导测试版正常运行，您必须按以下顺序放置脚本

<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一段时间的开发人员来说。我已经看到了许多消除错误的方法，但并非所有方法都适用于所有人。我认为使用Bootstrap4的最好和最干净的方法。在引导安装文件中，有一个文件名为“Bootstrap.bundle.js” 这已经包括了Popper。

正如我所指出的，在我的例子中，您必须使用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项目中遇到了这个问题，下面是我如何修复它的

  • 打开BundleConfig.cs
  • 查找：

    添加（新脚本包（“~/bundles/bootstrap”）。包括（“~/Scripts/bootstrap.js”）

    改为：

    bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include("~/Scripts/bootstrap.bundle.min.js"));
    • 这将设置要加载的捆绑文件。它的顺序已经正确了。您只需确保在视图中呈现此捆绑包

    使用

    /js/bootstrap.bundle.min.js
    而不是

    /js/bootstrap.min.js
    在将.html模板移动到wordpress模板时，我发现这个“popper required”经常出现：）

    这对我来说有两个原因：控制台错误可能具有欺骗性：

  • 控制台中的错误会使您走上错误的道路。这可能不是真正的问题。对我来说，第一个原因是您将.js文件设置为加载的顺序。在html easy中，将它们按与主题模板相同的顺序放置。在Wordpress中，您需要按正确的顺序将它们排队，但如果它们没有按正确的顺序出现，还需要设置优先级

  • 第二件事是页眉或页脚中的.js文件。将它们移到页脚可以解决这个问题——在一天的调试之后，我确实解决了这个问题。通常并不重要，但对于一个包含大量js库的复杂页面来说，它可能会

    • 我也有同样的错误，只是想分享我的解决方案。 事实证明，缩小版的popper的代码与注释在同一行，因此整个代码都被注释掉了。
    我只是在实际注释后按enter键，这样代码就在一个新的行上，然后它就可以正常工作了。

    我遇到了这个问题，然后我把我的下拉列表放在导航标签上。
    对我来说就是这样。

    您需要将popperjs与引导一起安装以消除此错误。请注意，如果您使用的是“引导”：“^4.4.1”和@popperjs/core v2.x组合，引导可能不支持popperjs版本。所以降低你的版本

    备选案文1： 
    npm安装popper.js@^1.12.9——保存

    并在jquery和引导脚本之间添加以下脚本

    “节点模块/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


    是的，你是对的，谢谢。然而，这是一种新事物。因为它总是在没有这些附加内容的情况下工作。如果我切换到CDN，它也会由于引导更新而工作。它也可以使用所需的tether.js。这个确切的顺序在Angular 5 Angular cli.json中为我修复了它。我的链接的顺序就是这样（jquery js、popper js、bootstrap js）它仍然给了我同样的错误。可能的重复也必须放在jquery/dist/jquery.min.js上面，这对我是有效的，所以我有Popper-then-jquery-then bootstrapGo来：找到哪个对我有效，哪个对我有效。谢谢你，你才是真正的英雄。这就是答案。它是有效的，我们应该在引导js之前包含它，所有这些都是有效的，不需要在index.html中添加任何脚本，也不需要在SPW应用程序中添加更多的节点模块。这是最快、最简单的修复方法，如果您遇到popper错误，使用包含popper的捆绑包是一个不错的选择。注意：您仍然需要在bootstrap.bundle.min.js之前包含jQuery，因为jQuery不是bundle的一部分。是的，它对我来说非常有效，我刚刚将
    {“node\u modules/bootstrap/dist/js/bootstrap.min.js”}
    更改为
    {“node\u modules/bootstrap/dist/js/bootstrap.bundle.min.js”}
    ，效果非常好，谢谢这就是为我做的。我将我的CDN与我从上面的答案复制的工作CDN进行了比较，这就是区别。我做了选项2。完美