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

Question

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

Answer 1

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>

Answer 2

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.

Answer 3

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

2. Re-install the correct version (here, it is the "1.16.1"):

npm install popper.js@^1.16.1 --save