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

I've installed Bootstrap 4 using Node and Gulp and when running the application I get the following error

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

Uncaught ReferenceError: Popper is not defined

未捕获的ReferenceError：未定义Popper

I've only been using the Bootstrap grid system so far and I haven't used anything that would require the Bootstrap JS. Looks to me like Bootstrap is missing something or I haven't installed it correctly (to be honest it's probably me) - has anyone else come across the same issue or know a fix at all?

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

7 个解决方案

#1

Since our Bootstrap beta 2 release, we added two new dist files : bootstrap.bundle.js and bootstrap.bundle.min.js which contain Popper.js inside

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

Plus use this link to find the latest release of Popper.js : https://cdnjs.com/libraries/popper.js because the above linked release (1.8.2) is very old, latest is 1.12.9

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

BTW you should choose the UMD release of Popper.js because it's the one used by Bootstrap

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

#2

Use bootstrap.bundle.js that already has popper.js NPM path 'bootstrap/dist/js/bootstrap.bundle.js'.

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

#3

For those struggling with this issue on Webpack: In your entry file,
import 'bootstrap' does give the error. You need to remove that and replace it with import 'bootstrap/dist/js/bootstrap.bundle.js'

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

This is sufficient and you don't need to import Popper separately. That applies for bootstrap 4.0.0.beta2

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

#4

In my case it turned out that the popper.js script should be called before bootstrap.js.

在我的例子中，事实证明应该在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>

#5

I had the same issue and have been playing around with it for half a day over a simple carousel. Safari on Mac didn't give feedback properly in that there is a priority on libraries:

我有同样的问题，并且在一个简单的旋转木马上玩了半天。 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>

Reviewing the error I ran across "You need JQ before BS for this to work", so I tried it, also putting Popper before BS.

回顾我遇到的错误“你需要在BS之前使用JQ才能工作”，所以我试了一下，也把Popper放在BS之前。

So I have all of these in my <head> and boom it worked.

所以我在中拥有所有这些，并且它的工作也很繁荣。

#6

1-Copy code on this page: https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js

1-Copy本页面代码：https：//cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js

2-Past on new file and save on this name (popper.min.js)

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

3-Add script on html before bootstrap script:

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

<script src="popper.min.js"></script>
<script src="bootstrap.js"></script>

#7

I had the same. I'm on Rails and i followed bootstrap 4 gem installation from https://github.com/twbs/bootstrap-rubygem. I just make popper requirement in application.js first, like this :

我有同样的。我在Rails上，我从https://github.com/twbs/bootstrap-rubygem跟随bootstrap 4 gem安装。我首先在application.js中制作popper要求，如下所示：

//= require popper
//= require jquery3
//= require jquery_ujs
//= require bootstrap-sprockets
//= require bootstrap

#1