Bootstrap 4: Uncaught ReferenceError: Popper is not defined
JavascriptJqueryBootstrap 4Javascript Problem Overview
I've installed Bootstrap 4 using Node and Gulp and when running the application I get the following error
> Uncaught ReferenceError: Popper is not defined
I've only been using the Bootstrap grid system so far and I haven't used anything that would require the Bootstrap JS. Looks to me like Bootstrap is missing something or I haven't installed it correctly (to be honest it's probably me) - has anyone else come across the same issue or know a fix at all?
Javascript Solutions
Solution 1 - Javascript
Since our Bootstrap beta 2 release, we added two new dist files : bootstrap.bundle.js and bootstrap.bundle.min.js which contain Popper.js inside
Plus use this link to find the latest release of Popper.js : https://cdnjs.com/libraries/popper.js because the above linked release (1.8.2) is very old, latest is 1.12.9
BTW you should choose the UMD release of Popper.js because it's the one used by Bootstrap
Solution 2 - Javascript
Use bootstrap.bundle.js that already has popper.js NPM path 'bootstrap/dist/js/bootstrap.bundle.js'.
Solution 3 - Javascript
For those struggling with this issue on Webpack: In your entry file,
import 'bootstrap' does give the error. You need to remove that and replace it with import 'bootstrap/dist/js/bootstrap.bundle.js'
This is sufficient and you don't need to import Popper separately. That applies for bootstrap 4.0.0.beta2
Solution 4 - Javascript
In my case it turned out that the popper.js script should be called before bootstrap.js.
<script src="https://../popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://../bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
Solution 5 - Javascript
I had the same issue and have been playing around with it for half a day over a simple carousel. Safari on Mac didn't give feedback properly in that there is a priority on libraries:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
Reviewing the error I ran across "You need JQ before BS for this to work", so I tried it, also putting Popper before BS.
So I have all of these in my <head> and boom it worked.
Solution 6 - Javascript
1-Copy code on this page: https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js
2-Past on new file and save on this name (popper.min.js)
3-Add script on html before bootstrap script:
<script src="popper.min.js"></script>
<script src="bootstrap.js"></script>
Solution 7 - Javascript
I had the same. I'm on Rails and i followed bootstrap 4 gem installation from https://github.com/twbs/bootstrap-rubygem. I just make popper requirement in application.js first, like this :
//= require popper
//= require jquery3
//= require jquery_ujs
//= require bootstrap-sprockets
//= require bootstrap
Solution 8 - Javascript
For those who are here and trying to add popper v2 to Laravel
in package.json at devDependencies section we have. As official doc says they move to"popper.js": "^1.12", so remove this string@popperjsscope name. If you have any v1 poppers used in project follow the migrate guide v1 to v2 from doc. UPD: this sht is required by bootstrap. so, i had to reinstall it after remove. skip this step.- in console
npm i @popperjs/core - in bootstrap.js at try section add
window.Popper = require('@popperjs/core') - rebuild your js in console
npm run dev - ok, now you can make your instance
let _instance = Popper.createPopper(element, tooltip, {})