Fix The TypeError: CreatePopper Is Not A Function In Bootstrap Quickly

TypeError: createPopper is not a function in Bootstrap

When we start with Bootstrap, we sometimes encounter many errors, especially during installation. The TypeError: createPopper is not a function in Bootstrap is one of the common errors when installing Bootstrap.

When does the TypeError: createPopper is not a function in Bootstrap happen?

Basically. What is Bootstrap? and what is Popper?

Bootstrap is a framework of CSS. It allows users to easily design a friendly website for mobile, laptop, and iPad devices. Popper, or in other words Popover, is a tooltip in Bootstrap that supports displaying pretty note information, not only supports displaying content as text but also allows displaying content as complex HTML structure.

The error occurs when we install Bootstrap but forget to install popper.js. Or we import Bootstrap before importing popper.js. Like this:

  <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />

  <!-- Forgot to import popper.min.js here -->

  <script src="bootstrap/bootstrap.min.css"></script>
  <main id="app">
      class="btn btn-warning"
      data-bs-content="Hello, This is LearnShareIT!"
      Toggle Tooltip
  <script src="main.js"></script>

When we click the Toggle Tooltip button, we get the following error:

Uncaught TypeError: i.createPopper is not a function

How to fix this error?

To fix this error, follow the ways below.

Import popper.min.js before importing bootstrap.min.js

Since Popper is a dependency of Bootstrap, we must import it before importing Bootstrap.

  <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />

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

  <!-- Import bootstrap.min.js -->
  <script src="bootstrap/bootstrap.min.css"></script>


Check the path to the popper.min.js file

Suppose we have a directory structure as shown below.

If we confuse the bootstrap folder with the bootstraps folder and import Popper with the path: “bootstraps/popper.min.js“. 

Then we will fail to import, and the error “createPopper is not a function” still occurs.

Check the path carefully or use the CDN to avoid this situation.

Use bootstrap.bundle.min.js package

The bootstrap.bundle.min.js package already contains Bootstrap and its dependencies, including popper.js. So, just import the bundle file, and we will solve the problem. Like this:

  <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />

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



We have just explained the causes and how to fix the TypeError: createPopper is not a function in Bootstrap. If you still can’t fix it, leave a comment below, and we will help you.

Have a nice day!

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *