• Uncaught TypeError: i.createPopper is not a function

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

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

    索引.html 
    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.  
    6.     
    7.     <link
    8.       href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
    9.       rel="stylesheet"
    10.       integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
    11.       crossorigin="anonymous"
    12.     />
    13.   head>
    14.  
    15.   <body>
    16.     
    17.     <div class="dropdown">
    18.       <button
    19.         class="btn btn-secondary dropdown-toggle"
    20.         type="button"
    21.         id="dropdownMenuButton1"
    22.         data-bs-toggle="dropdown"
    23.         aria-expanded="false"
    24.       >
    25.         Dropdown button
    26.       button>
    27.       <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    28.         <li><a class="dropdown-item" href="#">Actiona>li>
    29.         <li><a class="dropdown-item" href="#">Another actiona>li>
    30.         <li><a class="dropdown-item" href="#">Something else herea>li>
    31.       ul>
    32.     div>
    33.  
    34.     
    35.     <script
    36.       src="https://code.jquery.com/jquery-3.6.0.min.js"
    37.       integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
    38.       crossorigin="anonymous"
    39.     >script>
    40.  
    41.  
    42.     
    43.     <script
    44.       src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
    45.       integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
    46.       crossorigin="anonymous"
    47.     >script>
    48.  
    49.     
    50.     <script src="index.js">script>
    51.   body>
    52. html>

    引导捆绑包脚本包括：

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

    2. JavaScript插件。bootstrap.min.js

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

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

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

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

    索引.js 
    1. const myDropdown = document.getElementById('dropdownMenuButton1');
    2.  
    3. myDropdown.addEventListener('show.bs.dropdown', function () {
    4.   console.log('Dropdown shown');
    5. });

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

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

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

    索引.html 
    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.  
    6.     
    7.     <link
    8.       href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
    9.       rel="stylesheet"
    10.       integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
    11.       crossorigin="anonymous"
    12.     />
    13.   head>
    14.  
    15.   <body>
    16.     <div class="dropdown">
    17.       <button
    18.         class="btn btn-secondary dropdown-toggle"
    19.         type="button"
    20.         id="dropdownMenuButton1"
    21.         data-bs-toggle="dropdown"
    22.         aria-expanded="false"
    23.       >
    24.         Dropdown button
    25.       button>
    26.       <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    27.         <li><a class="dropdown-item" href="#">Actiona>li>
    28.         <li><a class="dropdown-item" href="#">Another actiona>li>
    29.         <li><a class="dropdown-item" href="#">Something else herea>li>
    30.       ul>
    31.     div>
    32.  
    33.     
    34.     <script
    35.       src="https://code.jquery.com/jquery-3.6.0.min.js"
    36.       integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
    37.       crossorigin="anonymous"
    38.     >script>
    39.  
    40.     
    41.     <script
    42.       src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"
    43.       integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
    44.       crossorigin="anonymous"
    45.     >script>
    46.  
    47.     
    48.     <script
    49.       src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"
    50.       integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
    51.       crossorigin="anonymous"
    52.     >script>
    53.  
    54.     
    55.     <script src="index.js">script>
    56.   body>
    57. html>

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

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

    结论 #

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

     

  • 相关阅读:
    全国企业质量管理知识竞赛刷题得分自动答题题库答案2023年
    AI编程工具：一站式编程解决方案，引领AI编程新时代
    CSRF和XSS是什么？
    【第十四篇】- Maven 自动化构建
    罗勇军 →《算法竞赛·快冲300题》每日一题：“游泳” ← DFS+剪枝
    API商品数据接口调用爬虫实战
    算法刷题入门线性表|单调栈
    服务器数据恢复—nas硬盘故障导致raid6失效、存储无法访问的数据恢复案例
    Java - 发送 HTTP 请求的及其简单的方法模块 - hutool
    C++入门学习（4）引用 （讲解拿指针比较）
  • 原文地址：https://blog.csdn.net/allway2/article/details/128082252