How to use Popper.js with Bootstrap 4 beta

B

8

62

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;

Base answered 15/8, 2017 at 14:19 Comment(0)

K

108

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.

Klina answered 15/8, 2017 at 16:7 Comment(0)

N

24

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.

Newlin answered 30/8, 2017 at 17:26 Comment(1)

with SRI:

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha256-98vAGjEDGN79TjHkYWVD4s87rvWkdWLHPs5MC3FvFX4=" crossorigin="anonymous"></script>

– Peers 21/5, 2018 at 6:57

K

14

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

Kancler answered 15/8, 2017 at 14:30 Comment(2)

I use popper 1.12.x and it error "SyntaxError: export declarations may only appear at top level of a module". Change to 1.11.0 and it works. Thank you :) – Dicentra 24/8, 2017 at 6:1

I don't believe it's the version that matters, it's the "umd" part of the url that gets missed when simply copying the script tag from cdnjs. https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.4/umd/popper.min.js works, https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.4/popper.min.js doesn't. – Insessorial 30/8, 2017 at 21:14

G

6

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.

Gabby answered 28/3, 2018 at 11:9 Comment(0)

P

1

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.

<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>

Prying answered 2/11, 2017 at 5:11 Comment(0)

T

1

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>

Tillich answered 6/3, 2019 at 20:42 Comment(0)

B

1

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>

Big answered 3/4, 2019 at 0:40 Comment(0)

H

0

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.

Haland answered 26/6, 2018 at 18:19 Comment(0)

What's UMD?

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

Recommended topics

Hot tags