Uncaught TypeError: i.createPopper is not a function

阅读：评论：0

“createPopper”不是我们使用引导程序时发生的函数错误需要popper.js脚本但不在页面上加载它的组件或在引导脚本之后加载它。要解决此错误，请包括引导程序在运行 JavaScript 代码之前捆绑脚本。

这是一个工作示例，它加载引导捆绑包脚本来解决错误。

索引.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><!-- ✅ load Bootstrap CSS ✅ --><linkhref="@5.1.3/dist/css/bootstrap.min.css"rel="stylesheet"integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"crossorigin="anonymous"/></head><body><!-- 👇️ dropdown example  --><div class="dropdown"><buttonclass="btn btn-secondary dropdown-toggle"type="button"id="dropdownMenuButton1"data-bs-toggle="dropdown"aria-expanded="false">Dropdown button</button><ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1"><li><a class="dropdown-item" href="#">Action</a></li><li><a class="dropdown-item" href="#">Another action</a></li><li><a class="dropdown-item" href="#">Something else here</a></li></ul></div><!-- ✅ load jQuery (optional) ✅ --><scriptsrc=".6.0.min.js"integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="crossorigin="anonymous"></script><!-- ✅ load Bootstrap bundle ✅ --><scriptsrc="@5.1.3/dist/js/bootstrap.bundle.min.js"integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"crossorigin="anonymous"></script><!-- ✅ Your JS script here ✅ --><script src="index.js"></script></body>
</html>

引导捆绑包脚本包括：

我们需要的脚本，以便添加功能下拉列表、模态、工具提示、弹出框等。popper.js
JavaScript插件。bootstrap.min.js

如果您在页面上分别加载脚本，请确保将脚本放在脚本上方，否则会出现错误。popper.min.jsbootstrap.min.jspopper.min.jsbootstrap.min.js

我们按以下顺序在页面上加载脚本：

加载 Bootstrap CSS 文件。
加载 jQuery 库（可选）。
加载引导捆绑包脚本。
运行我们自己的 JavaScript 文件（）。index.js

下面是示例中文件的内容。index.js

索引.js

const myDropdown = ElementById('dropdownMenuButton1');myDropdown.addEventListener('show.bs.dropdown', function () {console.log('Dropdown shown');
});

我们在下拉菜单中添加了一个事件侦听器，以便每次都打印消息将显示下拉列表。

请注意，您还可以在页面上单独包含脚本。如果您走这条路线，请确保在加载之前加载。popper.min.jsbootstrap.min.jspopper.min.jsbootstrap.min.js

下面是单独加载脚本的完整示例。

索引.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><!-- ✅ load Bootstrap CSS ✅ --><linkhref="@5.1.3/dist/css/bootstrap.min.css"rel="stylesheet"integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"crossorigin="anonymous"/></head><body><div class="dropdown"><buttonclass="btn btn-secondary dropdown-toggle"type="button"id="dropdownMenuButton1"data-bs-toggle="dropdown"aria-expanded="false">Dropdown button</button><ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1"><li><a class="dropdown-item" href="#">Action</a></li><li><a class="dropdown-item" href="#">Another action</a></li><li><a class="dropdown-item" href="#">Something else here</a></li></ul></div><!-- ✅ load jQuery (optional) ✅ --><scriptsrc=".6.0.min.js"integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="crossorigin="anonymous"></script><!-- ✅ load popper.js ✅ --><scriptsrc="/@popperjs/core@2.10.2/dist/umd/popper.min.js"integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"crossorigin="anonymous"></script><!-- ✅ load Bootstrap JS ✅ --><scriptsrc="@5.1.3/dist/js/bootstrap.min.js"integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"crossorigin="anonymous"></script><!-- ✅ Your JS script here ✅ --><script src="index.js"></script></body>
</html>

我们在脚本之前加载了脚本，否则我们会得到“createPopper 不是函数”类型错误。popper.min.jsbootstrap.min.js

我更喜欢使用 Bootstrap 捆绑包，因为它更直观并减少了重构时可能出错的事情。