Bootstrap throws Uncaught Error: Bootstrap's JavaScript requires jQuery

jquery html css twitter-bootstrap twitter-bootstrap-3

481,869

Solution 1

Try this

Change the order of files it should be like below..

<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/wow.min.js"></script>

Solution 2

If you're in a Browser-Only environment, use SridharR's solution.

If you're in a Node/CommonJS + Browser environment (e.g. electron, node-webkit, etc..); the reason for this error is that jQuery's export logic first checks for module, not window:

if (typeof module === "object" && typeof module.exports === "object") {
    // CommonJS/Node
} else {
    // window
}

Note that it exports itself via module.exports in this case; so jQuery and $ are not assigned to window.

So to resolve this, instead of <script src="path/to/jquery.js"></script>;

Simply assign it yourself by a require statement:

<script>
    window.jQuery = window.$ = require('jquery');
</script>

NOTE: If your electron app does not need nodeIntegration, set it to false so you won't need this workaround.

Solution 3

you should load jquery first because bootstrap use jquery features. like this:

<!doctype html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" src="css/animate.css">
        <link type="text/css" rel="stylesheet" src="css/bootstrap-theme.min.css">
        <link type="text/css" rel="stylesheet" src="css/bootstrap.min.css">
        <link type="text/css" rel="stylesheet" href="css/custom.css">

<!--   Shuffle your scripts HERE  -->
        <script src="js/jquery-1.11.0.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/wow.min.js"></script>
<!--   End  -->   

        <title>pyMeLy Interface</title>
    </head>
    <body>
        <p class="title1"><strong>pyMeLy</strong></p>
        <p class="title2"><em> A stylish way to view your media</em></p>
        <div style="text-align:center;">
            <button type="button" class="btn btn-primary">Movies</button>
            <button type="button" class="btn btn-primary btn-lg">Large button</button>
        </div>
    </body>
</html>

Solution 4

You need to add JQuery before adding bootstrap-

<!-- JQuery Core JavaScript -->
<script src="lib/js/jquery.min.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="lib/js/bootstrap.min.js"></script>

Solution 5

You have provided wrong order for JAVASCRIPT and BOOTSTRAP

by convention bootstrap must follow jquery file definition

<!-- JQuery Core JavaScript -->
<script src="lib/js/jquery.min.js"></script>
<script src="lib/js/jquery-ui.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="lib/js/bootstrap.min.js"></script>

View more solutions

481,869

Munim Munna

Answer should benefit the larger audience, not only the person who asked.

Updated on July 08, 2022

Comments

Munim Munna almost 2 years
I am trying to use Bootstrap to make an interface for a program. I added jQuery 1.11.0 to the <head> tag and thought that was that, but when I launch the web page in a browser jQuery reports an error:
```
Uncaught Error: Bootstrap's JavaScript requires jQuery
```
I have tried using jQuery 1.9.0, I have tried with copies hosted on several CDNs, but I can't get it work. Can anybody point out what I'm doing wrong?
- Adriano Repetti about 10 years
  
  Include jQuery before Bootstrap...
- Stuti Verma over 6 years
  
  In my case, I installed jquery before bootstrap and then, it worked fine. Just including before bootstrap didn't solve the error.
- Adeel Raza Azeemi about 4 years
  
  I my case, instead of adding jquery in the footer (as in bootstrap template); I added it in the header. Solved the problem.
- Tina Lee about 4 years
  
  just add <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jqu‌ery.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/Jxa‌Q=" crossorigin="anonymous"></script> before the bootstrap import script. Copy the latest CDN here: cdnjs.com/libraries/jquery
- Clément over 3 years
  
  Are you using Electron ? I've got the exact same issue while use Electron because jQuery global declaration is done in the module and not the Wndows. Force the declaration to the global windows object instead: <script>window.$ = window.jQuery = require('./contents/jquery-3.5.1/jquery-3.5.1.js');</script> <script src="./contents/bootstrap-4.5.3-dist/js/bootstrap.min.js"></‌script> Solution found here: link
- Christian R about 2 years
  
  I understand this post is dated. I found another situation where this error occurs. In my case, the solution was that in the .aspx source file for each form, I was calling a wrong jquery version: old code: <script src="Scripts/jquery-1.9.1.min.js"></script> corrected: <script src="Scripts/jquery-3.6.0.min.js"></script> Once I made this correction the program runs fine without triggering the jquery error. Need to verify what jquery version you have installed on the application. Another quick piece to check that can cause this error.
Green almost 10 years

Doesn't work for me. I have jQuery before Bootstrap and get the error anyway!
HimalayanCoder almost 9 years

worked but got a horizontal scrollbar at the bottom
Jax Cavalera about 8 years

If it's not working from this.. it might be that jQuery is installed via Bower and so you might need to look under bower_components/jquery/dist/jquery.js .. the "dist" part being what I had overlooked.
rikkit over 7 years

window.jQuery = window.$ = require('jquery'); this worked for me attempting to assemble a brunch build with jQuery 2 and Bootstrap 3. Only took me several hours to find your answer though :(. Does this requirement change in later versions of jQuery?
Onur Yıldırım over 7 years

I don't know but since this is not a bug, I don't think so. If your electron app does not need nodeIntegration, set it to false so you won't need this workaround.
syodage over 7 years

You have to install jquery using npm install jquery not with bower.
jwknz almost 7 years

Useful to see how electron deals with the libraries different than a window based app
MadPhysicist almost 7 years

Worked for me for a Django-Oscar project. This error starting showing up out-of-the-blue. I suppose messing with a completely unrelated code can change the rendering sequence and trigger this error.
Ryan over 5 years

I still don't understand it, but Laravel uses the same approach: github.com/laravel/laravel/blob/v5.7.0/resources/js/…
Admin over 5 years

must be multiple things that caused this error because when i added your solkution i got "require is not defined".
AnaCS about 5 years

I fixed it on angular.json with the code " "scripts": ["node_modules/jquery/dist/jquery.min.js", "node_modules/bootstrap/dist/js/bootstrap.min.js"]"
JJ Roman about 4 years

apparently I did not notice I have bootstrap.js included twice - first time it was way before query