How to use Popper.js with Bootstrap 4 beta

Question

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; 

Answer 1

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.

Answer 2

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.