Asked by:
Bootstrap's tooltips require Popper.js

Question
-
User-1548796982 posted
hello
I use Bootstrap 4 and Jquery-3.3.1 in my project. I use js as follows:
<script src="@Url.Content("~/Scripts/jquery-3.3.1.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/umd/popper.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/bootstrap.min.js")" type="text/javascript"></script>
When the page loads, I have the following errors:
SyntaxError: export declarations may only appear at top level of a module ----- popper.min.js:4:19633 TypeError: Bootstrap's tooltips require Popper.js (https://popper.js.org/) ------ bootstrap.min.js:6:34702
And these warnings also give:
Source map error: request failed with status 404 Resource URL: http://xxx.com/Content/bootstrap.css Source Map URL: bootstrap.css.map Source map error: request failed with status 404 Resource URL: http://xxx.com/Scripts/bootstrap.min.js Source Map URL: bootstrap.min.js.map
please guide me
Saturday, July 20, 2019 5:21 PM
All replies
-
User-943250815 posted
404, looks like you don´t have related files at right place.
What about just as an test point Scripts and CSS to CDN version published at Bootstrap main page https://getbootstrap.com/
Saturday, July 20, 2019 6:12 PM -
User-1548796982 posted
404, looks like you don´t have related files at right place.
What about just as an test point Scripts and CSS to CDN version published at Bootstrap main page https://getbootstrap.com/
Thank you.
By replacing the links you provided, it's true, but the problem is that the program might run on a system that does not have the Internet.
How can I download the downloaded version without problems?Sunday, July 21, 2019 3:51 AM -
User-2054057000 posted
When using Bootstrap 4 and above you need to reference the following things:
- Bootstrap css
- jQuery
- Popper.js
- Bootstrap.js
The below code snippet tells you correctly the order of reference of these file.
<!DOCTYPE html> <html> <head> <title>Page Title</title> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!--Bootstrap CSS Reference--> <link href="css/bootstrap.css" rel="stylesheet" /> <!--Website Style Sheet Reference--> <link href="css/style.css" rel="stylesheet" /> </head> <body> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </body> </html>
You can also reference these files directly from CDN instead of downloading them in your website and referencing them from your website's folder. This will make your work easier.
Sunday, July 21, 2019 10:19 AM -
User-943250815 posted
Nuget is your friend, search for Bootstrap and install, you will get all files.
Then point to installed files and don´t forget to place in right order as already suggestedSunday, July 21, 2019 2:06 PM -
User-474980206 posted
You original error meant you used the module version of popper.js, rather than the standalone compiled version using the cdn should fix this, but you should be able to find the correct file. Just download the cdn file.
The .map errors only appears with the browser debug window. They can be ignored. The warning is that you are using compiled files, but did not include map files, so the debugger can not show the source, only the compiled source.Sunday, July 21, 2019 5:49 PM