How to use Popper.js with Bootstrap 4 beta

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.

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.

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

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.