How to import popper.js?

Question

It seems to be a lame question, but I cannot figure it out. How to import popper.js which comes together with Bootstrap 4 beta?

I use Bower, and I've installed Bootstrap 4 beta. Now in the bower_components folder, there is the popper.js directory, which contains a few sub-folders. The problem is there is no dist folder and the popper.min.js file.

Bootstrap 4 guide links to CDN: https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js.

How to import popper.js without CDN? Where to find the popper.min.js file?

EDIT: Even if I download a zip file from the popper.js website, it contains the same files as I've downloaded from Bower.

Download it (from the CDN) to your server directory, and refer from there?! — Nisarg Shah, Aug 12 '17 at 13:02
The file you have linked to creates a `Popper` variable, so downloading that file and importing it via ` — yuriy636, Aug 12 '17 at 13:06
I would like to user `bower` to be able to easily update scripts in future. — Qrzysio, Aug 12 '17 at 13:07

Sora · Answer 1 · 2023-02-02T20:08:22.683

41

I ran into the same problem.

I downloaded the 'popper.min.js' file from the CDN on the bootstrap website.

See here: https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.4.4/cjs/popper.min.js

Easier than compiling the project.

Important: You must include popper after jquery but BEFORE bootstrap.

edited Feb 02 '23 at 20:08

answered Aug 13 '17 at 06:21

Sora

544
3
7

1

Dude you're my hero. Learning web dev in my free time, everyones talking about Bower and Yarn etc. Then you're like, just include this. – Fauxpas Aug 23 '17 at 12:04
3

The cool part about this approach and that you are already behind the latest version of my library and you are missing some important fixes. That's why dependency managers exist. – Fez Vrasta Aug 24 '17 at 18:56
@FezVrasta What do you mean? – Sora Jan 16 '18 at 18:32
1

If you copy-paste code without use a dependency manager you will miss important updates. – Fez Vrasta Jan 16 '18 at 18:33
1

@FezVrasta Makes sense. But I'm sure the people who used it are aware because it is a local file? – Sora Jan 16 '18 at 19:02
1

Most of people don't realize how much important is to keep the dependencies up to date – Fez Vrasta Jan 16 '18 at 19:02
@FezVrasta True – Sora Jan 16 '18 at 19:03
Yeah, also important crashes. and dependecy hell. – Luis Mauricio Mar 21 '19 at 17:24
Why is this file all commented out? – Roman Matveev Dec 11 '19 at 11:09
1

I don't understand this officious tone either. On the official Bootstrap intro page it tells you to include this: – mike rodent May 17 '20 at 08:45

Fez Vrasta · Answer 2 · 2017-08-16T12:56:03.030

17

The official way to install Popper.js is trough npm, Yarn or NuGet.

Use either one of the following commands :

npm i popper.js
yarn add popper.js
PM> Install-Package popper.js

Everything is described in the library readme.

Regarding the "downloads the zip", the zip clearly states that it contains the source code of the library.

Edit:

Starting from version 1.12.0, Popper.js is available as Bower dependency.

This installation method is going to be supported only for the 1.x version of Popper.js and will be removed in 2.x.

You should migrate your dependencies management to a modern system like npm or Yarn, as Bower suggests as well.

edited Aug 16 '17 at 12:56

answered Aug 13 '17 at 10:18

Fez Vrasta

14,110
21
98
160

1

It's not easy way. When installing Bootstrap 4 via Bower it's downloading non-compiled popper.js, but downloaded jQuery is "ready to go". – Qrzysio Aug 13 '17 at 11:20
3

Bower is deprecated, you should use npm – Fez Vrasta Aug 13 '17 at 11:21
npm doesn't seem to install the actual popper.js file. Is there another step after that? – CodeGrue Aug 16 '17 at 21:31
8

You find the files in the dist folder. Make sure to install popper.js, not "popper" – Fez Vrasta Aug 16 '17 at 21:45
1

Fez Vrasta, you just saved me hours. npm install *popper.js* --save – CodeGrue Aug 17 '17 at 15:50

score 8 · Answer 3 · edited Jun 20 '20 at 09:12

Ways to get popper.js: Package, CDN, and Local file

The best way depends on whether you have a project with a package manager like npm.

Package manager
If you're using a package manager, use it to get popper.js like this:

npm install popper.js --save

CDN
For a prototype or playground environment (like http://codepen.io) or may just want a url to a CDN file:

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

note: Bootstrap 4 requires the versions under the umd path (more info on popper/bs4).

Local file

Just save one of the CDN files to use locally. For example, paste one of these URLs in a browser, then Save As... to get a local copy.

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

MrGreen · Answer 4 · 2017-11-06T05:06:25.807

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

Copy the CDN paths of Javascripts (Popper, jQuery and Bootstrap) in same manner (it is important) as given.

<head>
//Path to jQuery
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

////Path to Popper - it is for dropsdowns etc in bootstrap
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>

//Path to bootsrap
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</head>

score 5 · Answer 5 · answered Nov 11 '17 at 14:05

5

I really don't understand why Javascript world trying to do thing more complicated. Why not just download and include in html? Trying to have something like Maven in Java? But we have to manually include it in html anyway? So, what is the point? Maybe someday I will understand but not now.

This is how I can get it

download & install NodeJs
run "npm install popper.js --save"
then I get this message

popper.js@1.12.7 added 1 package in 1.215s
then where is "add package" ? very informative , right? I found it in my C:\Users\surasin\node_modules\popper.js\dist

Hope this help

answered Nov 11 '17 at 14:05

Surasin Tancharoen

5,520
4
32
40

2

Too much opinion based answer w/o/ good amount of technical resources. – Machado Jan 13 '18 at 16:18
I also don`t understand why bootstrap 4 includes external popper.js, It means bootstrap makes more complicated instead of easy when upgrading to the latest versions. – Ajit Kumar Sep 05 '19 at 05:44

score 3 · Answer 6 · answered Feb 14 '19 at 02:04

add popper**.js** as dependency instead of popper (only): see the difference in bold.

yarn add popper.js , instead of yarn add popper

it makes the difference.

and include the script according your needs:

as html or the library access as a dependency in SPA applications like react or angular

score 3 · Answer 7 · answered Sep 05 '19 at 05:54

IN bootstrap 4 you need to add popper js for tooltip, I also don`t understand why bootstrap 4 includes external popper.js, It means bootstrap makes more complicated instead of easy when upgrading to the latest versions.

You can import popper js before bootstrap on angular or a simple html, Angular import would be like this

npm install popper.js --save

then go to .angular-cli.json and change the order like below.

 "scripts": [
        "../node_modules/jquery/dist/jquery.slim.min.js",
        "../node_modules/tether/dist/js/tether.min.js", 
        "../node_modules/popper.js/dist/umd/popper.js",              
        "../node_modules/bootstrap/dist/js/bootstrap.min.js"
      ],

you can also use CDN direct call popper js into your any project.

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

score 2 · Answer 8 · answered Jul 11 '21 at 02:48

2

first install propperJs from by yarn

yarn add popper.js

then you can import it like this

import Popper from "popper.js";

answered Jul 11 '21 at 02:48

Habib

138
8

score 1 · Answer 9 · answered Apr 07 '19 at 18:51

1

I deleted any existing popper directories, then ran

npm install --save popper.js angular-popper

answered Apr 07 '19 at 18:51

rpd

323
2
9

score 0 · Answer 10 · edited Aug 16 '17 at 14:14

0

It turns out that Popper.js doesn't provide compiled files on its GitHub repository. Therefore, one has to compile the project on his/her own or download compiled files from CDNs. It cannot be automatically imported.

edited Aug 16 '17 at 14:14

Cody Gray - on strike

239,200
50
490
574

answered Aug 12 '17 at 13:37

Qrzysio

1,147
3
12
25

2

The suggested way is to use npm actually – Fez Vrasta Aug 13 '17 at 10:14

score 0 · Answer 11 · answered Aug 15 '18 at 15:26

You can download and import all of Bootstrap, and Popper, with a single command using Fetch Injection:

fetchInject([
  'https://npmcdn.com/bootstrap@4.0.0-alpha.5/dist/js/bootstrap.min.js',
  'https://cdn.jsdelivr.net/popper.js/1.0.0-beta.3/popper.min.js'
], fetchInject([
  'https://cdn.jsdelivr.net/jquery/3.1.1/jquery.slim.min.js',
  'https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js'
]));

Add CSS files if you need those too. Adjust versions and external sources to meet your needs and consider using sub-resource integrity checking if you're not hosting the files on your own domain or don't trust the source.

score 0 · Answer 12 · answered Feb 19 '20 at 15:21

0

Install popper.js with spesific version number like this:

bower install popper.js@^1.16.0

Now u can find dist folder and popper.min.js file.

answered Feb 19 '20 at 15:21

msmhsnl

1
1

How to import popper.js?

12 Answers12

Ways to get popper.js: Package, CDN, and Local file

Linked

Related