OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Bootstrap 5 - Uncaught TypeError: Popper__namespace.createPopper is not a function

  • Thread starter Thread starter Shmack
  • Start date Start date
S

Shmack

Guest
I am using Django to serve web pages.


  • I am trying to make sure I am able to download all the resources necessary to make the webpage function as intended for offline use (as in one of those resources could be unavailable for my client to request, so I want to be able to have my server serve those files, or if I decide to run a copy of the site on a Raspberry Pi on localhost or something of the sort). One of which is bootstrap 5.


  • I am trying to use their dropdown menu feature... according to their docs:

    Dropdowns are built on a third party library, Popper, which provides dynamic positioning and viewport detection. Be sure to include popper.min.js before Bootstrap’s JavaScript or use bootstrap.bundle.min.js / bootstrap.bundle.js which contains Popper. Popper isn’t used to position dropdowns in navbars though as dynamic positioning isn’t required.

  • Because I am keen to find a solution, I have inserted a bunch of <script> tags trying to rule out the problem... maybe it's a bad idea.

What can I try next?

Code:
{% load static %}

<html class="w-100 h-100">
<head>
    <title>
        Fonts
    </title>

    <!--Important meta tags-->
    <!--Cancel zoom for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <!--example:-->
    <!--href="{% static 'polls/style.css' %}"-->

    <!--theme-->
    <link rel="shortcut icon" type="image/jpg" href="{% static 'Pages/favicons/CES.png' %}"/>
    <link type="text/css" rel="stylesheet" href="{% static 'Pages/css/main.css' %}">
    <script src="{% static 'Pages/js/main.js' %}"></script>

    <!--jQuery-->
    <script src="{% static 'Pages/jQuery/jquery-3.6.0.js' %}"></script>
    <script src="{% static 'Pages/jQuery/jquery-3.6.0.min.js' %}"></script>
    <script src="{% static 'Pages/jQuery/jquery-3.6.0.slim.js' %}"></script>
    <script src="{% static 'Pages/jQuery/jquery-3.6.0.slim.min.js' %}"></script>

    <!--bootstrap related-->
    <link type="text/css" rel="stylesheet" href="{% static 'Pages/Bootstrap/bootstrap-5.0.2-dist/css/bootstrap.css' %}">
    <link type="text/css" rel="stylesheet" href="{% static 'Pages/Bootstrap/bootstrap-5.0.2-dist/css/bootstrap.min.css' %}">
    <script src="{% static 'Pages/Bootstrap/bootstrap-5.0.2-dist/js/bootstrap.bundle.js' %}"></script>
    <script src="{% static 'Pages/Bootstrap/bootstrap-5.0.2-dist/js/bootstrap.bundle.min.js' %}"></script>
    <script src="{% static 'Pages/Bootstrap/bootstrap-5.0.2-dist/js/bootstrap.js' %}"></script>
    <script src="{% static 'Pages/Bootstrap/bootstrap-5.0.2-dist/js/bootstrap.min.js' %}"></script>

    <style>
{% if fonts %}
{% for font in fonts %}
        @font-face
        {
{% if font.font_family %}
            font-family: "{{font.font_family}}";
{% endif %}
{% if font.path %}
            src: url("{{font.path}}");
{% endif %}
        }
{% endfor %}
{% endif %}
    </style>

</head>
<body class="m-0 p-0 w-100 h-100">

    <button id="fonts" class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"  aria-expanded="false">
        <span class="visually-hidden">Fonts</span>
    </button>
    
    <ul class="dropdown-menu" role="menu" aria-labelledby="fonts">
{% if fonts%}
{% for font in fonts %}
        <li><div class="dropdown-item" style="font-family: '{{font.font_family}}'; text-align: center;">{{font.font_name}}</div></li>
{% endfor %}
{% endif %}
    </ul>

</body>
</html>

Image of the error

Further reading (from http://5.9.10.113/65685854/dropdown-button-in-bootstrap-5-not-working) has shown that a new version of Popper is actually causing the problem. So, I will investigate a little more and see what I can do.

Edit for answer​


Just for testing purposes, I added this snippet from Bootstrap's download page, and it works as expected. From here I went through all of my sources for bootstrap (not to mention that I folded and added the Popper CDN) and come to find out, something was wrong with my bootstrap.js file.

After grabbing the newest distribution of it from npm (and putting the build into a subdirectory for my use) I exchanged the Popper CDN for its counterpart via npm as well (I downloaded it, went into node_modules/ @popper/core/..., found the min file and referenced it) and now it works well. Last thing worth mentioning: ONLY USE THE .MIN. FILES!* so popper.min.js, bootstrap.min.js, bootstrap.min.css... having all the other files in script tags will cause Bootstrap to not function properly.


Code:
<html class="w-100 h-100">
<head>
    <title>
        Menu
    </title>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>


</head>
<body class="m-0 p-0 w-100 h-100">
  <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>
</body>
</html>

<p>I am using Django to serve web pages.</p>
<ul>
<li><p>I am trying to make sure I am able to download all the resources necessary to make the webpage function as intended for <strong>offline use</strong> (as in one of those resources could be unavailable for my client to request, so I want to be able to have my server serve those files, or if I decide to run a copy of the site on a Raspberry Pi on localhost or something of the sort). One of which is bootstrap 5.</p>
</li>
<li><p>I am trying to use their <strong>dropdown menu feature</strong>... according to their docs:</p>
<blockquote>
<p>Dropdowns are built on a third party library, Popper, which provides dynamic positioning and viewport detection. Be sure to include popper.min.js before Bootstrap’s JavaScript or use bootstrap.bundle.min.js / bootstrap.bundle.js which contains Popper. Popper isn’t used to position dropdowns in navbars though as dynamic positioning isn’t required.</p>
</blockquote>
</li>
<li><p>Because I am keen to find a solution, I have inserted a bunch of <code><script></code> tags trying to rule out the problem... maybe it's a bad idea.</p>
</li>
</ul>
<p>What can I try next?</p>
<pre><code>{% load static %}

<html class="w-100 h-100">
<head>
<title>
Fonts
</title>

<!--Important meta tags-->
<!--Cancel zoom for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<!--example:-->
<!--href="{% static 'polls/style.css' %}"-->

<!--theme-->
<link rel="shortcut icon" type="image/jpg" href="{% static 'Pages/favicons/CES.png' %}"/>
<link type="text/css" rel="stylesheet" href="{% static 'Pages/css/main.css' %}">
<script src="{% static 'Pages/js/main.js' %}"></script>

<!--jQuery-->
<script src="{% static 'Pages/jQuery/jquery-3.6.0.js' %}"></script>
<script src="{% static 'Pages/jQuery/jquery-3.6.0.min.js' %}"></script>
<script src="{% static 'Pages/jQuery/jquery-3.6.0.slim.js' %}"></script>
<script src="{% static 'Pages/jQuery/jquery-3.6.0.slim.min.js' %}"></script>

<!--bootstrap related-->
<link type="text/css" rel="stylesheet" href="{% static 'Pages/Bootstrap/bootstrap-5.0.2-dist/css/bootstrap.css' %}">
<link type="text/css" rel="stylesheet" href="{% static 'Pages/Bootstrap/bootstrap-5.0.2-dist/css/bootstrap.min.css' %}">
<script src="{% static 'Pages/Bootstrap/bootstrap-5.0.2-dist/js/bootstrap.bundle.js' %}"></script>
<script src="{% static 'Pages/Bootstrap/bootstrap-5.0.2-dist/js/bootstrap.bundle.min.js' %}"></script>
<script src="{% static 'Pages/Bootstrap/bootstrap-5.0.2-dist/js/bootstrap.js' %}"></script>
<script src="{% static 'Pages/Bootstrap/bootstrap-5.0.2-dist/js/bootstrap.min.js' %}"></script>

<style>
{% if fonts %}
{% for font in fonts %}
@font-face
{
{% if font.font_family %}
font-family: "{{font.font_family}}";
{% endif %}
{% if font.path %}
src: url("{{font.path}}");
{% endif %}
}
{% endfor %}
{% endif %}
</style>

</head>
<body class="m-0 p-0 w-100 h-100">

<button id="fonts" class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Fonts</span>
</button>

<ul class="dropdown-menu" role="menu" aria-labelledby="fonts">
{% if fonts%}
{% for font in fonts %}
<li><div class="dropdown-item" style="font-family: '{{font.font_family}}'; text-align: center;">{{font.font_name}}</div></li>
{% endfor %}
{% endif %}
</ul>

</body>
</html>
</code></pre>
<p><a href="https://i.sstatic.net/3KztU.png" rel="noreferrer"><img src="https://i.sstatic.net/3KztU.png" alt="Image of the error" /></a></p>
<p>Further reading (from <a href="http://5.9.10.113/65685854/dropdown-button-in-bootstrap-5-not-working" rel="noreferrer">http://5.9.10.113/65685854/dropdown-button-in-bootstrap-5-not-working</a>) has shown that a new version of Popper is actually causing the problem. So, I will investigate a little more and see what I can do.</p>
<h2>Edit for answer</h2>
<p>Just for testing purposes, I added this snippet from Bootstrap's download page, and it works as expected. From here I went through all of my sources for bootstrap (not to mention that I folded and added the Popper CDN) and come to find out, something was wrong with my bootstrap.js file.</p>
<p>After grabbing the newest distribution of it from npm (and putting the build into a subdirectory for my use) I exchanged the Popper CDN for its counterpart via npm as well (I downloaded it, went into node_modules/ @popper/core/..., found the min file and referenced it) and now it works well. Last thing worth mentioning: <em><em>ONLY USE THE .MIN.</em> FILES!</em>* so popper.min.js, bootstrap.min.js, bootstrap.min.css... having all the other files in <code>script</code> tags will cause Bootstrap to not function properly.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code><html class="w-100 h-100">
<head>
<title>
Menu
</title>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>


</head>
<body class="m-0 p-0 w-100 h-100">
<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>
</body>
</html></code></pre>
</div>
</div>
</p>
 

Online statistics

Members online
0
Guests online
3
Total visitors
3
Top