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:
<head>
<link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
<!-- Forgot to import popper.min.js here -->
<script src="bootstrap/bootstrap.min.css"></script>
<title>LearnShareIT</title>
</head>
<body>
<main id="app">
<button
class="btn btn-warning"
data-bs-toggle="popover"
data-bs-title="Title"
data-bs-content="Hello, This is LearnShareIT!"
>
Toggle Tooltip
</button>
</main>
<script src="main.js"></script>
</body>When we click the Toggle Tooltip button, we get the following error:
Uncaught TypeError: i.createPopper is not a functionHow 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.
<head>
<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>
<title>LearnShareIT</title>
</head>Output:
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:
<head>
<link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
<!-- Import bootstrap.bundle.min.js -->
<script src="bootstrap/bootstrap.bundle.min.js"></script>
<title>LearnShareIT</title>
</head>Output:
Summary
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:
- TypeError: getContext is not a function in JavaScript
- TypeError: Cannot read property ‘filter’ of Undefined in JavaScript
- “TypeError: toISOString is not a function” in JavaScript
Hi, I’m Cora Lopez. I have a passion for teaching programming languages such as Python, Java, Php, Javascript … I’m creating the free python course online. I hope this helps you in your learning journey.
Name of the university: HCMUE
Major: IT
Programming Languages: HTML/CSS/Javascript, PHP/sql/laravel, Python, Java
