Uncaught TypeError: i.createPopper is not a function

news2024/11/24 16:19:30

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

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

索引.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <!-- ✅ load Bootstrap CSS ✅ -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  </head>

  <body>
    <!-- 👇️ dropdown example  -->
    <div class="dropdown">
      <button
        class="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) ✅ -->
    <script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"
    ></script>


    <!-- ✅ load Bootstrap bundle ✅ -->
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@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 = document.getElementById('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 ✅ -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  </head>

  <body>
    <div class="dropdown">
      <button
        class="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) ✅ -->
    <script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"
    ></script>

    <!-- ✅ load popper.js ✅ -->
    <script
      src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"
      integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
      crossorigin="anonymous"
    ></script>

    <!-- ✅ load Bootstrap JS ✅ -->
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@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 捆绑包，因为它更直观并减少了重构时可能出错的事情。