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="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></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">
Messages
</a>
<a href="/phonebook" class="btn btn-light flex-1 py-3 rounded-0">
Phonebook
</a>
<button id="dd" class="btn btn-light flex-1 py-3 rounded-0 mt-0" data-toggle="dropwdown">
More
</button>
<div class="dropdown-menu"><a class="dropdown-item" href="/problems">Problems</a></div>
</div>
I then call the following, since it's a dynamically generated element
$("#dd").dropdown();
My question is different than the suggested, because I explain that I already tried all of the suggested solutions and none worked.
Solution:
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:
index.html
package.json
package-lock.json
|_ js
|_ css
|_ node_modules
|_ bootstrap
|_ dist
|_ jquery
|_ dist
|_ popper.js
|_ dist
|_udm
|_esm
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">
<head>
<title>Popper Test</title>
<link rel="stylesheet" href="/css/bootstrap.min.css">
</head>
<body>
<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
</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>
</div>
</div>
<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> -->
</body>
</html>
To run the example I used:
http-server found here
By running
npm install http-server -g
http-server
If you have not used the UDM version then
Opening chrome and going to http://127.0.0.1:8080. 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 (https://popper.js.org/)
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>
Works.
Versions implemented were:
- bootstrap: 4.2.1
- jquery: 3.3.1
- popper.js: 1.14.6
try to import this order:
- jquery
- popper
- bootstrap
for example:
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
