Fix - createPopper is not a Function Bootstrap Error in JS

avatar

Borislav Hadzhiev

Tue Oct 19 20212 min read

banner

Photo by Mael Balland

Fix - createPopper is not a Function Bootstrap Error #

The "createPopper" is not a function error occurs when we use a Bootstrap component that requires the popper.js script, but don't load it on the page or load it after the bootstrap script. To solve the error, include the Bootstrap bundle script before running your JavaScript code.

typeerror createpopper is not a function

Here's a working example that loads the Bootstrap bundle script to solve the error.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <!-- โœ… load Bootstrap CSS โœ… --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" /> </head> <body> <!-- ๐Ÿ‘‡๏ธ dropdown example --> <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> <!-- โœ… load jQuery (optional) โœ… --> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous" ></script> <!-- โœ… load Bootstrap bundle โœ… --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous" ></script> <!-- โœ… Your JS script here โœ… --> <script src="index.js"></script> </body> </html>

The Bootstrap bundle script includes:

  1. The popper.js script that we need in order to add functionality to dropdowns, modals, tooltips, popovers, etc.

  2. The bootstrap.min.js JavaScript plugins.

If you load the popper.min.js and the bootstrap.min.js scripts separately on your page, make sure to place the popper.min.js script above the bootstrap.min.js script, otherwise you would get the error.

We loaded the scripts on the page in the following order:

  1. Load Bootstrap CSS file.
  2. Load the jQuery library (optional).
  3. Load the Bootstrap bundle script.
  4. Run our own JavaScript file (index.js).

Here's the content of the index.js file from the example.

index.js
const myDropdown = document.getElementById('dropdownMenuButton1'); myDropdown.addEventListener('show.bs.dropdown', function () { console.log('Dropdown shown'); });

We simply add an event listener to the dropdown menu on the page that prints a message every time the dropdown is shown.

Note that you can also include the popper.min.js and bootstrap.min.jsscripts separately on your page. If you go that route, make sure to load popper.min.js before you load bootstrap.min.js.

Here's a complete example of loading the scripts separately.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <!-- โœ… load Bootstrap CSS โœ… --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" /> </head> <body> <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> <!-- โœ… load jQuery (optional) โœ… --> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous" ></script> <!-- โœ… load popper.js โœ… --> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous" ></script> <!-- โœ… load Bootstrap JS โœ… --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous" ></script> <!-- โœ… Your JS script here โœ… --> <script src="index.js"></script> </body> </html>

Note that we loaded the popper.min.js script before the bootstrap.min.js script, otherwise we would have gotten the "createPopper is not a function" Type Error.

I prefer using the Bootstrap bundle as it is more intuitive and reduces the things that can go wrong when refactoring.

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee