Bootstrap 4: Uncaught ReferenceError: Popper is not defined

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?

Answers:

Answer

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

Answer

Use bootstrap.bundle.js that already has popper.js NPM path 'bootstrap/dist/js/bootstrap.bundle.js'.

Answer

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

Answer

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

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

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
Answer

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.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.