Javascript Bootstrap 4:未捕获的 ReferenceError:未定义 Popper

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/46952775/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 03:41:09  来源:igfitidea点击:

Bootstrap 4: Uncaught ReferenceError: Popper is not defined

javascriptjquerybootstrap-4

提问by Web Develop Wolf

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 缺少某些东西,或者我没有正确安装它(老实说,这可能是我) - 有没有其他人遇到过同样的问题或根本不知道修复方法?

采纳答案by Johann-S

Since our Bootstrap beta 2 release, we added two new dist files : bootstrap.bundle.jsand bootstrap.bundle.min.jswhich contain Popper.jsinside

由于我们的引导Beta 2的版本中,我们增加了两个新的DIST文件:bootstrap.bundle.jsbootstrap.bundle.min.js含有Popper.js

Plus use this link to find the latest release of Popper.js : https://cdnjs.com/libraries/popper.jsbecause 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 使用的版本

回答by Anuj Dhanju

Use bootstrap.bundle.jsthat already has popper.jsNPM path 'bootstrap/dist/js/bootstrap.bundle.js'.

使用bootstrap.bundle.js已有popper.jsNPM路径'引导/距离/ JS / bootstrap.bundle.js'

回答by Euripides Georgantzos

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 上遇到此问题的人:在您的入口文件中,
import '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。这适用于引导程序 4.0.0.beta2

回答by Abdelsalam Shahlol

In my case it turned out that the popper.jsscript 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>

回答by Rich_F

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 Popperbefore BS.

回顾我遇到的错误“你需要在 BS 之前使用 JQ 才能工作”,所以我尝试了它,也放在PopperBS 之前。

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

所以我在我的所有这些<head>和繁荣中发挥了作用。

回答by Maxime Boué

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

回答by G. Hamza

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

1-复制此页面上的代码: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 新文件并保存此名称 (popper.min.js)

3-Add script on html before bootstrap script:

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

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