dropdown.js:186 Uncaught TypeError: u is not a constructor returning when I click on the dropdown button

user_11787409 0
Viewed 11848

In my node_modules I added the dependency of bootstrap that allows me to get dropdown.js. But when I am going on the page where I am using a dropdown, when I click on the dropdown button it doesn't work on development mode and it returns the following error:

dropdown.js:186 Uncaught TypeError: u is not a constructor
    at c.t.show (dropdown.js:186)
    at c.t.toggle (dropdown.js:137)
    at HTMLButtonElement.<anonymous> (dropdown.js:375)
    at Function.each (jquery.js:367)
    at jQuery.fn.init.each (jquery.js:202)
    at jQuery.fn.init.c._jQueryInterface [as dropdown] (dropdown.js:362)
    at HTMLButtonElement.<anonymous> (dropdown.js:528)
    at HTMLDocument.dispatch (jquery.js:5237)
    at HTMLDocument.elemData.handle (jquery.js:5044)

The concerned line in this dropdown.js file is the following one:

this._popper = new Popper(referenceElement, this._menu, this._getPopperConfig());

"Popper is not a constructor."

I tried this:

this._popper = Popper.createElement(referenceElement, this._menu, this._getPopperConfig());

But it is still not working.

What is strange is that I get this error only in development mode, not in production.

Here is the link to the entire file dropdown.js but I am not sure it will be helpful:

dropdown.js

bootstrap-4 constructor javascript
4 Answers

If you are using "bootstrap": "^4.4.1", and @popperjs/core v2.x combinations,bootstrap may not support popperjs version. So downgrade your version to get rid of this error.

Option 1: npm install popper.js@^1.12.9 --save

and Add following script between jquery and bootstrap scripts.

"node_modules/popper.js/dist/umd/popper.min.js",

Option 2: Add following script tag to index.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
user_133856030

Have you also added bootstrap.js (includes dropdown) and might cause this conflict. If not how is dropdown.js added to your code ? Do those checks:

1. If you are using some package manager. If yes, try to install dependencies via it.
2. Import last versions of jQuery, popper and dropdown.js.
3. Check. Maybe you are using another package where you already imported jQuery or bootstrap. (if using templates check them too) It should be imported just once.

user_102455810

The problem : Wrong version of Popper library

The solution :

check the official documentation of Bootstrap. If your version is not 4.6.X, please select the correct one. Then check the proper version of Popper (and JQuery, we never know...) regarding your version of bootstrap.

If version installed doesn't match, execute the following command lines :

  1. Uninstall Popper library:
npm remove @popperjs/core
npm remove popper.js
  1. Re-install the correct version (here, it is the "1.16.1"):
npm install popper.js@^1.16.1 --save
user_29718200

Sadly in 2021 this is still a problem and the biggest issue (and this will offend someone) lies with bootstrap developers.

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

Their documentation doesn't list any version dependencies and versions become out of date quite quickly which is why many of the above answers are no longer correct.

My personal situation was hampered by the fact that I was using cdnjs.cloudflare.com and the code I had was inherited from prior developers and popper was included separately to bootstrap.

Until bootstrap devs improve their documentation to list compatible popper versions there is only one working solution for people using cdnjs.cloudflare.com

Import bootstrap.bundle.min.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/js/bootstrap.bundle.min.js" ></script>
user_31032690
Related