引导程序 4：未捕获的 ReferenceError：未定义 Popper答案

【问题标题】：Bootstrap 4: Uncaught ReferenceError: Popper is not defined引导程序 4：未捕获的 ReferenceError：未定义 Popper
【发布时间】：2018-04-07 17:52:40
【问题描述】：

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

Uncaught ReferenceError: Popper is not defined

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

【问题讨论】：

这行得通 - 谢谢！如果您想将其作为未来读者的答案，我会将其标记为正确:)
您可能希望重新审视这个问题并将接受的答案更改为the one written by a Bootstrap maintainer，而不是当前接受的答案。

标签： javascript jquery bootstrap-4

【解决方案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 使用的版本

【讨论】：

不错！也许还可以摆脱 npm 警告 bootstrap@4.0.0-beta.2 requires a peer of popper.js@^1.12.3 but none is installed. You must install peer dependencies yourself.
是的，我们在最新的 beta2 中也删除了该警告 :)
这条消息还在。这是我的 Yarn 安装中控制台输出的片段:: [3/4] Linking dependencies... warning "bootstrap@4.0.0-beta.2" has unmet peer dependency "popper.js@^1.12.3". [4/4] ? Building fresh packages... success Saved lockfile. ✨ Done in 43.43s.
@Johann-S 我希望这不是一个愚蠢的问题，但这是否意味着 bootstrap.bundle.min.js 取代了 bootstrap.min.js？我假设是的......
@Sal_Vader_808 没错！ bootstrap.bundle.min.js 包含 Bootstrap + Popper.js

【解决方案2】：

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

【讨论】：

它为我解决了一个问题，并且没有出现任何依赖错误。

【解决方案3】：

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

这样就足够了，不需要单独导入 Popper。这适用于 bootstrap 4.0.0.beta2

【讨论】：

【解决方案4】：

在我的例子中，popper.js 脚本应该在 bootstrap.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>

【讨论】：

在我的 rails 5 application.js 中更改顺序也有效，谢谢！
太好了，解决了我的问题 :) 并非我们所有人都有机会更改引导程序，所以这很有魅力！

【解决方案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>

查看我遇到的错误“You need JQ before BS for this to work”，所以我试了一下，还把Popper放在了BS之前。

所以我在我的<head> 中有所有这些，并且成功了。

【讨论】：

【解决方案6】：

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

2-过去在新文件上并保存在这个名称上 (popper.min.js)

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

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

【讨论】：

【解决方案7】：

我也一样。我在 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

【讨论】：

【解决方案8】：

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

~~在 devDependencies 部分的 package.json 中，我们有 "popper.js": "^1.12", 所以删除这个字符串~~。正如官方文档所说，他们移至@popperjs 范围名称。如果您在项目中使用了任何 v1 poppers，请遵循从 doc 迁移指南 v1 到 v2。 UPD：这个 sht 是 bootstrap 所必需的。所以，我不得不在删除后重新安装它。跳过这一步。
在控制台npm i @popperjs/core
在 bootstrap.js 中的 try 部分添加 window.Popper = require('@popperjs/core')
在控制台npm run dev中重建你的js
好的，现在你可以创建你的实例了 let _instance = Popper.createPopper(element, tooltip, {})

【讨论】：