我使用Node和Gulp安装了Bootstrap 4,运行应用程序时出现以下错误
未捕获的ReferenceError:未定义Popper
到目前为止我只使用过Bootstrap网格系统而且我还没有使用任何需要Bootstrap JS的东西。在我看来像Bootstrap缺少一些东西或我没有正确安装它(说实话它可能是我) - 有没有其他人遇到同样的问题或知道修复?
答案 0 :(得分:49)
自我们的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使用的版本
答案 1 :(得分:21)
使用 bootstrap.bundle.js 已经 popper.js NPM路径'bootstrap / dist / js / bootstrap.bundle.js'
答案 2 :(得分:15)
对于那些在Webpack上遇到此问题的人:在您的输入文件中,
导入'bootstrap'确实会出错。您需要删除它并将其替换为 import'bootstrap / dist / js / bootstrap.bundle.js'
这已足够,您无需单独导入Popper。这适用于bootstrap 4.0.0.beta2
答案 3 :(得分:12)
在我的情况下,结果是 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>
答案 4 :(得分:3)
我有同样的问题,并且在一个简单的旋转木马上玩了半天。 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>
中拥有所有这些并且繁荣起来。
答案 5 :(得分:1)
在此页面上复制代码: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
答案 6 :(得分:1)
我也一样。我在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 | |
+----------------------------------------------+---------+---------+------+
答案 7 :(得分:0)
对于那些在这里尝试将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, {})