Skip to main content

How to Resolve Bootstrap Error: "TypeError: createPopper is not a function" Error in JavaScript

The TypeError: createPopper is not a function is a common error when using Bootstrap 5. It occurs when you try to use a Bootstrap component that depends on Popper.js (like dropdowns, tooltips, or popovers), but the Popper.js library has not been correctly loaded on your page.

This guide will explain why this error happens and show you the two standard ways to fix it: by using the Bootstrap bundle file (recommended) or by including the Popper.js script separately in the correct order.

The Core Problem: A Missing Dependency​

Many of Bootstrap's interactive components require a third-party library called Popper.js to handle the complex task of positioning floating elements like dropdown menus and tooltips. The createPopper function is the main function provided by this library.

The error "createPopper is not a function" is a clear signal that when Bootstrap's JavaScript tried to initialize a component, it looked for the createPopper function but couldn't find it. This means either:

  • The Popper.js script was not included on the page.
  • The Popper.js script was included after the Bootstrap script.

The simplest and most reliable way to solve this is to use the Bootstrap JavaScript bundle. This single file includes both the Bootstrap JavaScript and the complete Popper.js library, so you don't have to manage them separately.

Problem: you are using a Bootstrap dropdown, but it doesn't work and you see the createPopper error in the console.

HTML:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
  </ul>
</div>

<!-- This will cause the error because popper.js is missing -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>

Solution: replace the standalone bootstrap.min.js file with the bootstrap.bundle.min.js file.

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Example</title>
  <!-- 1. Load Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  
  <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
      Dropdown
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
    </ul>
  </div>

  <!-- 2. Load the Bootstrap JS Bundle (which includes Popper.js) -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
  
  <!-- 3. (Optional) Load your custom script last -->
  <script src="index.js"></script>
</body>
</html>

By using the bundle, you ensure that all of Bootstrap's dependencies are present and loaded correctly, which resolves the error.

The Alternative Solution: Loading Popper.js Separately​

If you prefer to load the libraries separately, you can do so, but the order is critical. You must load Popper.js before you load Bootstrap's JavaScript.

<body>
  <!-- Your HTML content -->

  <!-- 1. Load Popper.js FIRST -->
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>

  <!-- 2. Load Bootstrap's JavaScript SECOND -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
</body>

This works because when bootstrap.min.js executes, it will find the createPopper function already available on the global scope.

How to Debug the Error​

  • Check the Browser Console: The createPopper is not a function error is your primary clue.
  • Check the Network Tab: Open your browser's Developer Tools (F12) and go to the Network tab.
    • Verify that your JavaScript files (bootstrap.bundle.min.js or popper.min.js) are loading with a status of 200 OK. If you see a 404 Not Found error, it means your src path is incorrect.
    • Check the order in which the files are listed. If you are loading the files separately, make sure popper.min.js appears before bootstrap.min.js.

Conclusion​

The TypeError: createPopper is not a function is a classic dependency error when using Bootstrap.

  • The root cause is that the Popper.js library, which is required for components like dropdowns and tooltips, is missing or loaded in the wrong order.
  • The recommended best practice is to use the Bootstrap JavaScript bundle file (bootstrap.bundle.min.js). This single file includes everything you need and prevents ordering issues.
  • If you must load the files separately, ensure you load popper.min.js before bootstrap.min.js.

Table of Contents