CODEWITHSUNDEEP
javascriptbootstrap-5
Shmack
Shmack

Reputation: 2331

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

I am using Django to serve web pages.

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>

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.

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

Upvotes: 67

Views: 102782

Answers (16)

farshad saeidi
farshad saeidi

Reputation: 595

only add use bundle version of ".js". I use only 2 file of bootstrap 5.3 in current project I working on it.

<link href="~/lib/bootstrap/bootstrap.min.css" rel="stylesheet" />
<script src="~/lib/bootstrap/bootstrap.bundle.min.js"></script>

Upvotes: 1

Nsamba Isaac
Nsamba Isaac

Reputation: 495

in my django base template had to do this and it solved the problem:

1 - i added a popper.min.js to static folder js/popper.min.js

2 - i included the file in my base.html template file like bellow:

<script type="text/javascript" src="{% static 'js/popper.min.js' %}"></script>
<script src="{% static 'css/bootstrap/dist/js/bootstrap.min.js' %}"></script>

Upvotes: 0

ivanov17
ivanov17

Reputation: 144

From the Bootstrap documentation:

You must include popper.min.js before bootstrap.js or use bootstrap.bundle.min.js / bootstrap.bundle.js

Then it works.

Upvotes: 1

Engin &#199;ELİK
Engin &#199;ELİK

Reputation: 21

if you did not install bootstrap then please firstly install bootstrap by npm i bootstrap and then;

In Angular.json add following lines;

"scripts":["node_modules/bootstrap/dist/js/bootstrap.min.js",
"node_modules/bootstrap/dist/js/bootstrap.bundle.js"]

make sure you add bootstrap.min.js first.

Upvotes: 0

Fernando Issan O&#241;ate Rodriguez
Fernando Issan O&#241;ate Rodriguez

Reputation: 31

I am using bootstrap's icons as well and my angular.json currently works with this configuration:

"styles"[
    "node_modules/bootstrap/dist/css/bootstrap.min.css",
    "node_modules/bootstrap-icons/font/bootstrap-cons.css"
],
"scripts": [
    "node_modules/bootstrap/dist/js/bootstrap.bundle.js"
]

yup, only with those three imports my problem was solved, hope this can be usefull to someone else.

This answer is based on the bootstrap docs which says:

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.

https://getbootstrap.com/docs/5.3/components/dropdowns/

Upvotes: 3

Mirado Andria
Mirado Andria

Reputation: 611

It happens because Bootstrap 5+ uses popper js for dropdown, and requires popper.js or popper.min.js to be declared in your script sources, or you can use bootstrap.bundle.js (or bootsrap.bundle.min.js).

So instead of just using:

<script src="[...YOUR_JS_CDN...]/bootstrap.min.js" />

Add popper js before bootstrap:

<script src="[...YOUR_JS_CDN...]/popper.min.js" />
<script src="[...YOUR_JS_CDN...]/bootstrap.min.js" />

Or use bootstrap.bundle:

<script src="[...YOUR_JS_CDN...]/bootstrap.bundle.min.js" />

In your case, replace this (since you redeclare bootstrap js again at the end):

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

And use only:

<script src="{% static 'Pages/Bootstrap/bootstrap-5.0.2-dist/js/bootstrap.bundle.js' %}"></script>

Upvotes: 12

Aldrin Thomas
Aldrin Thomas

Reputation: 11

I got the same issue with popper.js and I just figured out to replace my cdn with bootstrap js bundle to solve this issue

Upvotes: 0

user110288
user110288

Reputation: 9

According to project Angular, must be declared in the component where the navbar or function is called. import { createPopper } from '@popperjs/core';

Upvotes: 1

Christine Treacy
Christine Treacy

Reputation: 212

For my Vue 3 and Nuxt-bridge app I added this to the nuxt.config.js file:

script: [
      {
        src: "https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js",
        type: "text/javascript"
      },
      {
        src: "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js",
        integrity: "sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ",
        crossorigin:"anonymous"

      }
]

And made sure I didn't have any versions of bootstrap or jquery in my package.json

Upvotes: 0

Md Shayon
Md Shayon

Reputation: 375

This error occurs because of not loading popper.js along with bootstrap.

The bootstrap dropdown menu uses javascript code from popper js. In order to work with the bootstrap menu, you must use popper.js.

You can use this bootstrap starter file in any kind of project whether it is Django or any other framework.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"></script>
  </body>
</html>

or you can add popper.js and bootstrap js before your ending body tag and don't forget to add popper js before bootstrap.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"></script>

Upvotes: 0

Tamas Hegedus
Tamas Hegedus

Reputation: 1

I also had this problem and it was caused by the wrong order of js insertions. First you have to load popper js then bootstrap js as written on bootstrap doc site. This solved this issue in my case.

Upvotes: 0

Jimmy
Jimmy

Reputation: 2951

I was including bootstrap.min.js instead of bootstrap.bundle.min.js

Upvotes: 54

Dnyanesh_B
Dnyanesh_B

Reputation: 670

For angular project make sure you have to use "scripts": [ "./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js" ].

Upvotes: 42

Ch&#233;rif
Ch&#233;rif

Reputation: 11

worked for by moving popper.js to src/assets/js/popper.min.js in angular 13

Upvotes: 0

Kartik Chandra
Kartik Chandra

Reputation: 430

I get the same error in my ANGULAR 13 project & solve it after performing below changes:-

I changed the code in angular.json file like build >> options >> scripts

            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              
              "src/assets/js/popper.min.js",
              "src/assets/js/calender.js",
              "src/assets/js/jquery.easing.min.js",

              "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
            ]

& use the specific version of BOOTRAP, JQUERY & POPPER JS in package.json file like:-

"bootstrap": "^5.1.3",
"jquery": "^3.6.0",
"popper.js": "^1.16.1",

Upvotes: 1

Dani&#235;l J.M. Hoffman
Dani&#235;l J.M. Hoffman

Reputation: 2137

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>

Upvotes: 79

Related Questions