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

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?

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

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

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

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

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/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>