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?
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
Use bootstrap.bundle.js that already has popper.js NPM path 'bootstrap/dist/js/bootstrap.bundle.js'.
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
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>
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.
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>
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
For those who are here and trying to add popper v2 to Laravel
in package.json at devDependencies section we have
"popper.js": "^1.12",
so remove this string. As official doc says they move to #popperjs scope 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, {})
Related
I've installed Bootstrap v5.1.0 to my Laravel 8 project using npm. How do I include bootstrap.bundle.js at my public/app.js?
I have installed popperjs and added this code to my resources/js/bootstrap.js
try {
window.Popper = require('#popperjs/core');
require('bootstrap');
} catch (e) {
}
My webpack.mix.js code:
mix.js('resources/js/app.js', 'public/js')
.sass('resources/scss/app.scss', 'public/css')
.sourceMaps();
And I have added CSS & JS on my template like this:
{{-- Styles --}}
<link rel="stylesheet" href="{{asset('css/app.css')}}">
{{-- Script --}}
<script src="{{asset('js/app.js')}}"></script>
The public/js.app.js (generated from mix) has a lot of codes (see picture below), But still bootstrap JS codes(ex: Popovers) not working.
How can I properly include Bootstrap JS files in my project?
Okay, I found the solution. It was a silly mistake. Bootstrap 5 requires additional JavaScript code for popovers to work. I'm writing this answer for (if) anyone come here from googling. Here is the link of Popover codes. Bootstrap Documentation
And all the codes I found on public/js.app.js (generated from mix) was created on development environment (npm run dev). When I run npm run prod (Production) it get rids of these codes and also minifies the output.
Thank you. Have a good day.
instead of import 'bootstrap'
You can try
import Bootstrap from 'bootstrap/dist/js/bootstrap.bundle.min.js'
📌
I'm trying to import external JavaScript file (which uses jQuery) to my ionic 3 project.
To install jQuery, based on this answer, I ran:
npm install jquery --save
Then I can see that jQuery is working by executing some code inside $(document).ready from the first page of my app (it works).
Now I need to include reference to my external jQuery library, which I've done in src/index.html by:
<script src="assets/js/myLibrary.js"></script>
myLibrary.js uses jQuery by:
(function($, window, document) {
...
})(jQuery, window, document);
But unfortunately I get jQuery is not defined error from the library file.
I'm not sure if jQuery is not yet ready or something else, I tried adding defer attribute to the script import but with no luck.
Any ideas?
You could just do this in your html file. Please note that you can only do that when you have wifi.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I ended up putting jquery in src/assets/jquery.min.js, and then in index.html I added a script reference before the jQuery-dependent library I wanted to use:
<script src="assets/jquery.min.js" defer></script>
<script src="assets/js/myLibrary.js" defer></script
I'm not sure if that's the correct way to do this in ionic, and I'm not sure if that makes a duplicate import of jQuery [I already imported it via npm install jquery --save].
Anyway it works - FYI for anybody looking in this thread in the future.
Suddenly I started to get error when I try to open my dropdown menu :
bootstrap.min.js:6 Uncaught Error: Bootstrap dropdown require Popper.js (https://popper.js.org)
at bootstrap.min.js:6
at bootstrap.min.js:6
at bootstrap.min.js:6
I am using standard bootstrap file
<script src="https://getbootstrap.com/dist/js/bootstrap.min.js">
Anything changed in bootstrap I have to take care off?
Order I am loading files is following
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="{{ STATIC_URL }}/static/jquery/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="{{ STATIC_URL }}/static/jquery/jquery-ui.js"></script>
<script src="https://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
<script src="https://getbootstrap.com/assets/js/vendor/holder.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="https://getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js"></script>
In the introduction of Bootstrap it states which imports you need to add. https://getbootstrap.com/docs/4.0/getting-started/introduction/#quick-start
You have to add some scripts in order to get bootstrap fully working. It's important that you include them in this exact order. Popper.js is one of them:
<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.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
Instead of:
js/bootstrap.min.js
use:
js/bootstrap.bundle.min.js
Bootstrap 4 is not yet a mature tool yet. The part of requiring another plugin to work is even more complicated especially for developers who have been using Bootstrap for a while. I have seen many ways to eliminate the error but not all work for everyone. I think the best and cleanest way to work with Bootstrap 4. Among the Bootstrap installation files, There is one with the name "bootstrap.bundle.js"
that already comes with the Popper included.
include popper.js before bootstrap.min.js
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.0.4/popper.js"></script>
use this link to get popper
In order for Bootstrap Beta to function properly, you must place the scripts in the following order.
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
As pointed out here you must use the script in the UMD subdirectory, in my case
bundles.Add(new ScriptBundle("~/bundles/projectbundle").Include(
"~/Scripts/umd/popper.js",
"~/Scripts/bootstrap.js",
"~/Scripts/respond.js",
"~/Scripts/summernote-bs4.js"));
Specifically this: "~/Scripts/umd/popper.js",
You need to install popperjs along with bootstrap to get rid of this error.Note that if you are using "bootstrap": "^4.4.1", and #popperjs/core v2.x combinations,bootstrap may not support popperjs version. So downgrade your version.
Option 1:
npm install popper.js#^1.12.9 --save
and Add following script between jquery and bootstrap scripts.
"node_modules/popper.js/dist/umd/popper.min.js",
Option 2:
Add following script tag to index.html
<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
I had this issue with an MVC project and here is how I fixed it.
Open BundleConfig.cs
Find :
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include("~/Scripts/bootstrap.js"));
Change to:
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include("~/Scripts/bootstrap.bundle.min.js"));
This will set the bundle file to load. It is already in the correct order. You just have to make sure that you are rendering this bundle in your view.
In my case I am using Visual Studio and Nuget packages its failing because have duplicated libraries one in the same folder as jQuery and another in the folder umd. By removing the popper javascript files from the same level as jQuery and refere to the popper.js inside the umd folder fixed my issue and I can see the tooltips correctly.
I was facing this issue, then I put my dropdown in nav tag.
Worked for me that way.
On moving a .html template to a wordpress one, I found this "popper required" popping up regularly :)
Two reasons it happened for me: and the console error can be deceptive:
The error in the console can send you down the wrong path. It MIGHT not be the real issue. First reason for me was the order in which you have set your .js files to load. In html easy, put them in the same order as the theme template. In Wordpress, you need to enqueue them in the right order, but also set a priority if they don't appear in the right order,
Second thing is are the .js files in the header or the footer. Moving them to the footer can solve the issue - it did for me, after a day of trying to debug the issue. Usually doesn't matter, but for a complex page with lots of js libraries, it might!
I had the same error and just wanted to share my solution.
In turned out that the minified version of popper had the code in the same line as the comment and so the entire code was commented out.
I just pressed enter after the actual comment so the code was on a new line and then it worked fine.
I'm trying to install this JQuery Plugin: http://coverflowjs.github.io/coverflow/tutorial/get-started/
I'm relatively new to rails, and not sure how to implement a JQuery plugin without a Gem. (And not comfortable trying to create a gem at this point)
Can someone please assist in laying out a step-by-step breakdown of how they would go about installing this plugin?
Really appreciate any help.
You should use rails-assets.org, which wraps bower components into ruby gems on the fly. Find the equivalent library in bower and then use the gem it creates.
Coverflow is available at https://rails-assets.org/#/components/coverflow
Follow below steps:
Download latest jquery file using link https://code.jquery.com/jquery-3.1.1.min.js
Add file under /assets/javascript folder
OR
Add below code under app/views/layouts/application.html.erb
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
You just try this..
You can download the plugin and save it in vendor/assets/javascripts. Then you include it on application.js
//In (for example) application.js
//= require jquery
or in some added file like
<%= javascript_include_tag 'jquery' %>
You can do these steps as below:
download coverflowjs library and put it inside app/assets/javascripts/ or you can put it inside vendor/assets/javascripts/
in your file application.js, you only put this line.
//= require coverflowjs
I'm working on an admin panel built on top of AdminLTE template. The template depends on jquery, bootstrap and some other custom plugins that must be previously included using script tags in document head.
I'm using Jspm to manage libraries, some libraries like Toastr will require jQuery as a dependency, and will install and load another copy of jQuery.
I'm trying to figure out how to configure SystemJS in order to:
a) Tell SystemJS that I don't need install another copy of jQuery and
b) avoid duplicate loading of jQuery, since it's a global dependency that was previously loaded. How to achieve this?
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
...
<script src="system.js"></script>
<script>
System.config({
"map": {
"jquery": window.jQuery //???
}
});
</script>
<script>
System.import('main').
</script>
Looks like you want to use System.set
System.set( 'jQuery', System.newModule({'default': window.jQuery }) );
This assumes the global is expected to be the 'default'. You can also specify other exports as well by passing in more key / values to System.newModule.
If you can, it would be better to import your globals like other scripts because globals can have dependencies and systemjs can manage the load order for you through meta config setup