CODEWITHSUNDEEP
bootstrap-4popper.js
Phillip Senn
Phillip Senn

Reputation: 47605

How to use Popper.js with Bootstrap 4 beta

I'm old school, so I downloaded the source code to 1.12.0 and then did the following:

<script src="/popper.js-1.12.0/dist/popper.js"></script>
<script src="/bootstrap-4.0.0-beta/dist/js/bootstrap.js"></script>

But I'm getting:

Uncaught SyntaxError: Unexpected token export

on line 2294 where it says: 

export default Popper;

Upvotes: 63

Views: 51782

Answers (8)

Kellie
Kellie

Reputation: 343

As per Fez Vrasta.

If retrieving popper through NuGet Package Manager within Visual Studio make sure your popper.js script reference path is using the umd folder:

MVC ASP.Net BundleConfig example:

        bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                  "~/Scripts/umd/popper.js", //path with umd
                  "~/Scripts/bootstrap.js",
                  "~/Scripts/respond.js"));

Direct script reference example:

<script src="~/Scripts/umd/popper.js" type="text/javascript"></script>

Upvotes: 1

Valmor Nascimento
Valmor Nascimento

Reputation: 111

Just use bootstrap's bundle version and your good!

<script src="./node_modules/jquery/dist/jquery.min.js"></script>
<!-- <script src="./node_modules/popper.js/dist/popper.min.js"></script> -->
<!-- <script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script> -->
<script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

Upvotes: 1

CourteousCoder
CourteousCoder

Reputation: 21

Separate Containers:

If you followed the accepted answer and your tool-tips are still in the wrong place, it might be because you have a different container for each tool-tip.

I would try this to allow the tool-tip to be placed near the parent of the element:

const initializeTooltips = function () {
    $('[data-toggle="tooltip"]').each(function() {
        $(this).tooltip({container: $(this).parent()});
    });
};
$(document).ready(function () {
    initializeTooltips();
});

Try It yourself on jsfiddle.

Upvotes: 0

MrGreen
MrGreen

Reputation: 147

I had the same problem. Tried different approaches, but this one worked for me. Read the instruction from http://getbootstrap.com/.

Copy the CDN links (jQuery, Popper and Bootstrap) in same order (it is important) as given.

Bootstrap CDN links

<head>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</head>

Upvotes: 1

Shiv
Shiv

Reputation: 3275

As per the popper docs:

Popper.js is currently shipped with 3 targets in mind: UMD, ESM and ESNext.

UMD - Universal Module Definition: AMD, RequireJS and globals;

ESM - ES Modules: For webpack/Rollup or browser supporting the spec;

ESNext: Available in dist/, can be used with webpack and babel-preset-env; Make sure to use the right one for your needs. If you want to import it with a tag, use UMD.

Upvotes: 6

Fez Vrasta
Fez Vrasta

Reputation: 14825

You want to use the dist target specified in the package.json file as main entry.

In this case, you are looking for the umd build (dist/umd/popper.js)

What's UMD?

The UMD pattern typically attempts to offer compatibility with the most popular script loaders of the day (e.g RequireJS amongst others). In many cases it uses AMD as a base, with special-casing added to handle CommonJS compatibility.

This means that an UMD bundle can be loaded via <script> tag and get injected inside the global scope (window), but also work if required with a CommonJS loader such as RequireJS.

Upvotes: 109

Lee Whitney III
Lee Whitney III

Reputation: 10978

Popper requires that you use the file under the umd path with Bootstrap 4.

Either of these CDN versions will work:

https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.5/umd/popper.js https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.5/umd/popper.min.js

Other answers/comments mention the version, however the problem is not related to versioning.

It's never a bad practice to use Bootstrap's example of including popper because it should always work. Bootstrap 4 as of now recommends popper 1.11 which is a safe choice, however version 1.12.5 should work fine as well.

Side note: Why the confusion with umd, esm, and plain ol' popper files? The intention is flexible module packaging, but in reality it could be made simpler. This post explains some of the issues with new module types.

Upvotes: 25

Carol Skelly
Carol Skelly

Reputation: 362360

Make sure you use the Popper.js version referenced in the Bootstrap docs.

https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js

Upvotes: 14

Related Questions