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

Question 1

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

javascript bootstrap-5

Shmack · Aug 12, 2021 · Viewed 10.9k times · Source

Answer

Answer

I received this error (TypeError: i.createPopper is not a function) each time when popovers should be shown. Previously I had to make use of the Separate Popper and Bootstrap JS (Option 2) - due to conflict with other scrips. However this is no longer necessary in my project, with Bootstrap 5.1.1.

Including only the Bootstrap bundle with popper - as per @Kevin's comment above - fixed the issue for me - And the previous conflicts don't seem to be an issue anymore. All popovers, tooltips, modals, sidebars etc. seem to now be working properly:

<body>
    <!-- Option 1: Bootstrap Bundle with Popper -->
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>    
</body>

Question 2

So 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. 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 so desperate to find a solution, I have inserted a bunch of <script> tags trying to rule out the problem... maybe its a bad idea.

All that said, I haven't been able to figure it out. Help :) ?

Please, let me know how I can improve this question. Thank you in advance!


{% 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>

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 like a charm... 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.

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

Answer

Related questions