Bootstrap 4 popper is undefined

Question

I\'m trying to get a dropdown going and whenever I click on the button I get TypeError: popper is undefined.

I tried importing the bundle instead of b

Answer 1

Solution:

You can use the bundled bootstrap popper by importing

See the documentation here.

Or use the UDM Version of popper, see details below.

Steps to use popper

I like package managers. So here goes:

npm init

Just say yes to everything..

npm install bootstrap --save
npm install jquery --save
npm install popper.js --save

I created two folders js and css with an index.html file as follows:

 index.html
 package.json
 package-lock.json
 |_ js
 |_ css
 |_ node_modules
     |_ bootstrap
       |_ dist
     |_ jquery
       |_ dist
     |_ popper.js
       |_ dist
          |_udm
          |_esm

I then copied the files from the dist folder in various libraries located in node_modules to the css and js folders. With the exception of popper, use the popper.js file or popper.min.js file located in the dist/udm folder

The contents of the index.html file is as follows:

    
        
        
    

    

            

                    
                      Dropdown button
                    
                    

                      Action
                      Another action
                      Something else here
                    
                  

        
        
        
        
    

To run the example I used: http-server found here By running

npm install http-server -g
http-server

If you have not used the UDM version then Opening chrome and going to http://127.0.0.1:8080. Brings up my page, hitting F12 and then trying to press the dropdown fails with the error message:

bootstrap.min.js:6 Uncaught TypeError: Bootstrap's dropdowns require Popper.js (https://popper.js.org/)
    at c.t.toggle (bootstrap.min.js:6)
    at HTMLButtonElement. (bootstrap.min.js:6)
    at Function.each (jquery.min.js:2)
    at w.fn.init.each (jquery.min.js:2)
    at w.fn.init.c._jQueryInterface [as dropdown] (bootstrap.min.js:6)
    at HTMLButtonElement. (bootstrap.min.js:6)
    at HTMLDocument.dispatch (jquery.min.js:2)
    at HTMLDocument.y.handle (jquery.min.js:2)

Either use the UDM version described above or the bundled bootstrap version by switching from:

to :

Works.

Versions implemented were:

• bootstrap: 4.2.1
• jquery: 3.3.1
• popper.js: 1.14.6