Bootstrap 4 popper is undefined

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 bootstrap

// import "bootstrap";
import 'bootstrap/dist/js/bootstrap.bundle.js';

I tried importing jquery first

import "jquery";
import "bootstrap";

I tried importing popper as well

import "popper.js/dist/umd/popper.min.js";
import "jquery";
import "bootstrap";

I also tried including popper from a CDN before any other scripts

<script src=""></script>

And I tried just about any combination of imports mentioned above, still getting this error, even when I can access Popper in the console.

<div class="d-flex justify-content-between dropdown luri-eayq">
   <a href="/messages" class="btn btn-light flex-1 py-3 rounded-0">
   <a href="/phonebook" class="btn btn-light flex-1 py-3 rounded-0">
   <button id="dd" class="btn btn-light flex-1 py-3 rounded-0 mt-0" data-toggle="dropwdown">
   <div class="dropdown-menu"><a class="dropdown-item" href="/problems">Problems</a></div>

I then call the following, since it's a dynamically generated element


My question is different than the suggested, because I explain that I already tried all of the suggested solutions and none worked.




You can use the bundled bootstrap popper by importing

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

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:

 |_ js
 |_ css
 |_ node_modules
     |_ bootstrap
       |_ dist
     |_ jquery
       |_ dist
     |_ popper.js
       |_ dist

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:

<!DOCTYPE html>
<html class="no-js" lang="en">
        <title>Popper Test</title>
        <link rel="stylesheet" href="/css/bootstrap.min.css">


            <div class="dropdown">
                    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      Dropdown button
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                      <a class="dropdown-item" href="#">Action</a>
                      <a class="dropdown-item" href="#">Another action</a>
                      <a class="dropdown-item" href="#">Something else here</a>

        <script src="/js/jquery.min.js"></script>
        <script src="/js/popper.js"></script>
        <script src="/js/bootstrap.min.js"></script>
        <!-- <script src="/js/bootstrap.bundle.min.js"></script> -->

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

npm install http-server -g

If you have not used the UDM version then Opening chrome and going to 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 (
    at c.t.toggle (bootstrap.min.js:6)
    at HTMLButtonElement.<anonymous> (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.<anonymous> (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:

<script src="/js/jquery.min.js"></script>
<script src="/js/popper.js"></script>
<script src="/js/bootstrap.min.js"></script>
<!-- <script src="/js/bootstrap.bundle.min.js"></script> -->

to :

<script src="/js/jquery.min.js"></script>
<!-- <script src="/js/popper.js"></script> -->
<!-- <script src="/js/bootstrap.min.js"></script>-->
<script src="/js/bootstrap.bundle.min.js"></script>


Versions implemented were:

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

try to import this order:

  1. jquery
  2. popper
  3. bootstrap

for example:

<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.