Question

我使用Node和Gulp安装了Bootstrap 4，运行应用程序时出现以下错误

未捕获的ReferenceError：未定义Popper

到目前为止我只使用过Bootstrap网格系统而且我还没有使用任何需要Bootstrap JS的东西。在我看来像Bootstrap缺少一些东西或我没有正确安装它（说实话它可能是我） - 有没有其他人遇到同样的问题或知道修复？

Answer 1

自我们的Bootstrap beta 2发布以来，我们添加了两个新的dist文件：bootstrap.bundle.js和bootstrap.bundle.min.js，其中包含Popper.js

另外使用此链接查找Popper.js的最新版本：https://cdnjs.com/libraries/popper.js，因为上面的链接版本（1.8.2）非常旧，最新版本为1.12.9

顺便说一句，你应该选择Popper.js的UMD版本，因为它是Bootstrap使用的版本

Answer 2

使用 bootstrap.bundle.js 已经 popper.js NPM路径'bootstrap / dist / js / bootstrap.bundle.js'

Answer 3

对于那些在Webpack上遇到此问题的人：在您的输入文件中，
导入'bootstrap'确实会出错。您需要删除它并将其替换为 import'bootstrap / dist / js / bootstrap.bundle.js'

这已足够，您无需单独导入Popper。这适用于bootstrap 4.0.0.beta2

Answer 4

在我的情况下，结果是 bootstrap.js 之前应该调用 popper.js 脚本。

<script src="https://../popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://../bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>

Answer 5

我有同样的问题，并且在一个简单的旋转木马上玩了半天。 Mac上的Safari没有正确提供反馈，因为图书馆有优先权：

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>

回顾我遇到的错误＆＃34;你需要在BS之前使用JQ才能工作＆＃34;所以我尝试了它，同时将Popper放在BS之前。

所以我在我的<head>中拥有所有这些并且繁荣起来。

Answer 6

在此页面上复制代码：https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js

2-Past on new file并保存此名称（popper.min.js）

在引导脚本之前在html上添加脚本：

ember new my-addon -b https://github.com/my-company/my-companys-blueprint.git

Answer 7

我也一样。我在Rails上，我从https://github.com/twbs/bootstrap-rubygem开始关注bootstrap 4 gem安装。我首先在application.js中制作popper要求，如下所示：

+-----------------+
|  panel          |
+-----------------+------------------------------------------------+
|                                                                  |
|  This is panel heading.                                          |
|                                                                  |
+-------------------------------------------------------------------------+
|                                                                  |      |
|  row 1, for form elements.                                       |      |
|                                                                  |      |
|                                                                  |      |
|                                                                  |      +
|                                                                  |   panel-body
|                                                                  |      +
|                                                                  |      |
|                                                                  |      |
|                                                                  |      |
|                                                                  |      |
+----------------------------------------------+---------+---------+      |
|  row 2, only buttons to the right            | button1 | button2 |      |
+----------------------------------------------+---------+---------+------+

Answer 8

对于那些在这里尝试将popper v2添加到Laravel的人

~~"popper.js": "^1.12"，因此，请删除该字符串~~。如官方文档所述，它们将移至@popperjs范围名称。如果您在项目中使用了任何v1 poppers，请按照从文档到v2的迁移指南进行迁移。 UPD ：引导程序需要执行此操作。因此，删除后我必须重新安装它。跳过此步骤。
在控制台npm i @popperjs/core
window.Popper = require('@popperjs/core')
在控制台npm run dev中重建您的js
好的，现在您可以创建自己的实例了 let _instance = Popper.createPopper(element, tooltip, {})

Bootstrap 4：未捕获的ReferenceError：未定义Popper

8 个答案: