Still getting “Uncaught Error: Bootstrap dropdown require Popper.js” even after including popper.js
Question
New to Angular and Bootstrap and I am trying little hands on by creating helloworld app. I have added required libraries but I am stuck at this error
Uncaught Error: Bootstrap dropdown require Popper.js
I have added the popper.js script, after the jquery and before bootstrap js. but still browser throws the error.
Please help.
code looks like this:
<!DOCTYPE html>
<html ng-app="helloWorld" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Index</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body ng-controller="mainCtrl">{{message}}
<script src="js/angular.min.js" type="text/javascript"></script>
<script src="js/jquery-3.2.1.slim.min.js" type="text/javascript"></script>
<script src="js/popper.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="app/app.js" type="text/javascript"></script>
</body>
</html>
4 answers
solution1
20 ACCPTED 2017-08-24 07:06:29
This worked for me :
- use popper.js which are in the folder named "umd" in the download you find here https://popper.js.org
- do not save the files in the same folder as your bootstrap.js but create a separate folder named "umd"
- declare popper.js before bootstrap.js
So, in your case, change
<script src="js/popper.min.js" type="text/javascript"></script>
to
<script src="js/umd/popper.min.js" type="text/javascript"></script>
solution2
3 2017-10-04 16:27:06
Indra4ev3r's answer worked for me on VS2015 Update 3 for an MVC5 project. Eg, switched popper before bootstrap.
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/umd/popper.js",
"~/Scripts/bootstrap.js"));
solution3
0 2017-09-24 06:46:19
Had the same problem and solved it. Hope it helps!
If you are using Bootstrap.js in your project then it requires jquery and popper.js to run ahead of bootstrap. below steps might solve the issue:
cd to the Project's folder or cd to project's bootstrap folder. Execute:
npm install popper.js --saveGo to http://getbootstrap.com/docs/4.0/getting-started/download/ Copy the script and link contents under Bootstrap CDN section which states - If you're using our compiled JavaScript, don't forget to include CDN versions of jQuery and Popper.js before it.
Your index.html file might have to look like this: (Based on the versions of the jquery and popper.js) You are basically looking for 3 script src = "" tags in the following order jquery > popper.js > bootstrap.js note: editor doesnt allow me to add script tags. pls add them.
src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"> src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"> src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous">
solution4
0 2018-05-28 07:03:54
I got this error in VisualStudio 2017 too.
when I deleted "min" in this line
<script src="Scripts/popper.min.js"></script>
as
<script src="Scripts/popper.js"></script>
and the DropDownMenu function worked!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.