Reputation: 44352
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
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
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
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
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
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
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, ornpm audit
for details
So I did npm audit fix
, and after another npm audit fix --force
it successfully installed!
Upvotes: 7
Reputation: 13463
Here is a work-around:
js
directory in the same directory as your index.htmljs
directory
https://github.com/FezVrasta/popper.js#installatione.g.: https://unpkg.com/popper.js/dist/umd/popper.min.js
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
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
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.
npm install popper.js@^1.12.3 --save
npm install [email protected] --save
npm install [email protected] --save
For Bootstrap 4.1
npm install popper.js@^1.14.3 --save
npm install [email protected] --save
npm install [email protected] --save
Upvotes: 83
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
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