locked
Bootstrap's tooltips require Popper.js RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote
    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

  • Question
    Sign in to vote
    0
    Sign in to vote
    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
  • Question
    Sign in to vote
    0
    Sign in to vote
    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
  • Question
    Sign in to vote
    0
    Sign in to vote
    User-2054057000 posted

    When using Bootstrap 4 and above you need to reference the following things:

    1. Bootstrap css
    2. jQuery
    3. Popper.js
    4. 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
  • Question
    Sign in to vote
    0
    Sign in to vote
    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 suggested

    Sunday, July 21, 2019 2:06 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    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