与 bootstrap 4 一起使用时，jquery 未定义 popper js line 2325答案

【问题标题】：jquery is not defined popperjs line 2325 when used with bootstrap4与 bootstrap 4 一起使用时，jquery 未定义 popper js line 2325
【发布时间】：2017-11-17 16:53:09
【问题描述】：

我正在使用 bootstrap 4.0 beta，它需要 popperjs，它是 v1.12.5 。 jQuery 是 3.2.1 版本，处于 jQuery.noConflict() 模式。这是针对 shopify 主题的，因此要包含 javascript 文件，它在 Shopify 的 Slate 命令行工具中使用 gulp-include 指令。我的包含文件如下所示：

// =require vendor/jquery-3.2.1.js
// =require vendor/popper.js
// =require vendor/bootstrap.min.js

当我尝试使用 Bootstrap Navbar 下拉切换时，我收到控制台错误

Uncaught TypeError: Cannot read property 'jquery' of undefined

jQuery 在所有非 popper 引导功能和自定义 jQuery javascript 中都能正常工作。但是，当我在控制台中键入它时，没有定义 jquery（带有小写 q），但这是 popperjs 在第 2325 行使用的。如果我编辑 popperjs 源并将 q 大写，它仍然会引发相同的错误。

【问题讨论】：

标签： javascript jquery twitter-bootstrap bootstrap-4 popper.js

【解决方案1】：

有关更多上下文，您收到此错误是因为您尝试使用无效的 HTML 元素作为下拉按钮。我收到此错误是因为我尝试使用带有嵌套按钮的锚标记，以及 .dropdown-menu div

例如这行得通

<button class="dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
</button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Thing 1</a>
    <a class="dropdown-item" href="#">Thing 2</a>
    <a class="dropdown-item" href="#">Thing 3</a>
  </div>

但这不是

<a class="dropdown">
<button class="dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
</button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Thing 1</a>
    <a class="dropdown-item" href="#">Thing 2</a>
    <a class="dropdown-item" href="#">Thing 3</a>
  </div>
</a>

【讨论】：

被问到问题时我正在处理的主题已被替换，所以我不能回去查看（我在另一家公司工作），但我会相信你的话它。

【解决方案2】：

您以某种方式将无效的 DOM 元素传递给 Popper.js，如果您将 Popper.js 更新到最新版本，您将收到更好的错误消息。

【讨论】：

我们也遇到过这个问题。后来发现，我们通过“dropdown-toggle”类传递了 data-toggle="invalid dom"。一旦我们删除了 data-toggle，它就起作用了。