How to host popper.js locally

user_5511561 0
Viewed 16663

I just upgraded to Bootstrap four and realized Popper.js was a dependency. I like to host libraries locally, as I sometimes need to work offline, but when I try to use it offline, I get an error unexpected token export. It works, however, when I use the Cloudflare CDN version, but how can I host popper.js locally?

(I don't want to use a package manager for this.)

twitter-bootstrap popper.js javascript
7 Answers

The README.md of the project will help sort this out:

Dist targets

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 <script> tag, use UMD.

Hence, if you want to use Popper.js with a <script /> tag, you want to use the umd version of it. Located in dist/umd.

user_20599960

you can use bootstrap.bundle.min.js which already contain Popper.js

user_27819060

I also tried downloading popper and I tried to recreate your problem, and you are correct.

If you check the Quick Start section of getbootstrap.com page, you can find the following line in their example:

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>

Note the umd part in their link. You can download that file and add it locally and it will work.

PS - You may also have to change your jQuery import.

user_15358530

Download the official bootstrap files by clicking the first link on this page:

https://getbootstrap.com/docs/4.5/getting-started/download/

You can then use the bootstrap.bundle.min.css file in css which contains popper.js as well as the bootstrap code you might need

you can use it by using this code in your <head> tag:

<link rel="stylesheet" type="text/css" href="path-to/bootstrap-4.5.0/css/bootstrap.bundle.min.css">

I included 4.5.0 because that is the current version of bootstrap out there today

user_136091540

Just download the source code and refer to it

Get the source code from the github page, then refer to it in your html

<script type="text/javascript" src="/path/to/downloaded/popper.js-1.12.5/dist/poppper.js" />
user_46820460

If you download Popper.js though

npm install popper.js

I found there are difference between npm package and its original source which is here https://popper.js.org/.

I just download popper.js from its original source and put it new js file. It worked for me.

user_61000270
user_135023490
Related