CODEWITHSUNDEEP
twitter-bootstrappopper.js
4thSpace
4thSpace

Reputation: 44352

How to install popper.js with Bootstrap 4?

From what I've read so far, popper.js is a big pain with Bootstrap 4. I can't get it to work. I keep getting this error:

Error: Bootstrap dropdown require Popper.js (https://popper.js.org)

I've tried the CDN and NPM install. Same result. At the bottom of my HTML file, I have this for the NPM install:

<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/tether.min.js"></script>
<script src="js/bootstrap.min.js"></script>

Then tried this for the CDN:

<script src="/js/jquery.min.js"></script>
<script src="/js/tether.min.js"></script>
<script src="https://cdnjs.com/libraries/popper.js"></script>
<script src="/js/bootstrap.min.js"></script>

Any ideas what I'm doing wrong?

Upvotes: 67

Views: 196475

Answers (11)

Remus Case
Remus Case

Reputation: 470

npm install bootstrap jquery --save

You don't have to install popper.js with npm as it comes with npm Bootstrap in bootstrap.bundle.js.

Bundled JS files (bootstrap.bundle.js and minified bootstrap.bundle.min.js) include Popper, but not jQuery.

Source to Verify: Link

Now you only have to do this in your HTML file:

<script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

Upvotes: 5

user9900365
user9900365

Reputation:

I have the same problem while learning Node.js Here is my solution for it to install jquery 

npm install [email protected] --save
npm install popper.js@^1.12.9 --save

Upvotes: 0

novice programmer
novice programmer

Reputation: 138

It's simple you can Visit this, And save the file as popper.min.js

then import it.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import 'bootstrap/dist/css/bootstrap.css';
import './index.css';
import 'bootstrap/dist/js/popper.min.js';
global.jQuery = require('jquery');
require('bootstrap');

Upvotes: 3

Chris
Chris

Reputation: 5627

Two different ways I got this working.

Option 1: Add these 3 <script> tags to your .html file, just before the closing </body> tag:

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Option 2 (Option 2 works with Angular, not sure about other frameworks)

Step 1: Install the 3 libraries using NPM:

npm install bootstrap --save

npm install popper.js --save

npm install jquery --save

Step 2: Update the script: array(s) in your angular.json file like this:

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

(thanks to @rakeshk-khanapure above in the comments)

Upvotes: 8

nafics
nafics

Reputation: 11

Instead of remotely putting popper js from CDN you can directly install it in your angular project.

Try this.

npm install popper.js --save

This query installs an updated version of popper.js Don't mention any version there, it will work for you.

Upvotes: -1

DavidLio
DavidLio

Reputation: 71

I had problems installing it Bootstrap as well, so I did:

Install popper.js: npm install popper.js@^1.12.3 --save

Install jQuery: npm install [email protected] --save

Then I had a high severity vulnerability message when installing [email protected] and got this message:

run npm audit fix to fix them, or npm audit for details

So I did npm audit fix, and after another npm audit fix --force it successfully installed!

Upvotes: 7

kmiklas
kmiklas

Reputation: 13463

Here is a work-around:

  1. Create a js directory in the same directory as your index.html
  2. Download popper.min.js from the following site into said js directory https://github.com/FezVrasta/popper.js#installation

e.g.: https://unpkg.com/popper.js/dist/umd/popper.min.js

  1. Change your the src of your script include to look like this:

    src="js/popper.min.js"

Note that you've removed Popper from npm version control, so you'll have to manually download updates.

Upvotes: 1

hackwithharsha
hackwithharsha

Reputation: 920

Pawel and Jobayer has already mentioned about how to install popper.js through npm.

If you are using front-end package manager like bower. use the following command

bower install popper.js --save

Upvotes: 3

Jobayer Ahmmed
Jobayer Ahmmed

Reputation: 2086

Bootstrap 4 has two dependencies: jQuery 1.9.1 and popper.js 1.12.3. When you install Bootstrap 4, you need to install these two dependencies.

For Bootstrap 4.1

Upvotes: 83

Pawel Nieradka
Pawel Nieradka

Reputation: 261

Try doing this:

npm install bootstrap jquery popper.js --save

See this page for more information: how-to-include-bootstrap-in-your-project-with-webpack

Upvotes: 25

Sam Hajari
Sam Hajari

Reputation: 354

https://cdnjs.com/libraries/popper.js does not look like a right src for popper, it does not specify the file

with bootstrap 4 I am using this 

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

and it is working perfectly fine, give it a try

Upvotes: 27

Related Questions