Resolving Dependency Order Error: "Bootstrap's JavaScript Requires jQuery" [closed]

Question

Closed. This question needs debugging details. It is not currently accepting answers.

Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.

Closed 7 years ago.

This post was edited and submitted for review 9 months ago and failed to reopen the post:

Original close reason(s) were not resolved

Improve this question

I'm developing a user interface for my application using Bootstrap. I included jQuery (version 1.11.0) in my HTML document's <head> section, expecting it to meet Bootstrap's dependency requirements. However, when I load the page in a browser, I encounter the following error from jQuery:

Uncaught Error: Bootstrap's JavaScript requires jQuery

I've also tested jQuery version 1.9.0 and various other copies hosted on different CDNs, but I'm still facing issues. Can anyone help me identify what might be misconfigured or missing in my setup?

In my case, I installed jquery before bootstrap and then, it worked fine. Just including before bootstrap didn't solve the error. — Stuti Verma
– Stuti Verma, Commented Aug 19, 2017 at 8:03
I my case, instead of adding jquery in the footer (as in bootstrap template); I added it in the header. Solved the problem. — Adeel Raza Azeemi
– Adeel Raza Azeemi, Commented Apr 14, 2020 at 5:53
just add <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script> before the bootstrap import script. Copy the latest CDN here: cdnjs.com/libraries/jquery — Tina Lee
– Tina Lee, Commented Apr 26, 2020 at 6:21
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 — Clément
– Clément, Commented Nov 20, 2020 at 13:30

Michael M. · Accepted Answer · 2023-01-03 02:25:02Z

402

Try this

Change the order of JS 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>

edited Jan 3, 2023 at 2:25

Michael M.

11.2k11 gold badges22 silver badges46 bronze badges

answered Mar 26, 2014 at 10:27

Sridhar R

20.4k7 gold badges41 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Green Over a year ago

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

HimalayanCoder Over a year ago

worked but got a horizontal scrollbar at the bottom

Jax Cavalera Over a year ago

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.

MadPhysicist Over a year ago

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.

JJ Roman Over a year ago

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

Cloudy · Accepted Answer · 2018-12-17 14:30:56Z

115

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.

edited Dec 17, 2018 at 14:30

Cloudy

7,5297 gold badges64 silver badges98 bronze badges

answered Jul 24, 2016 at 20:17

Onur Yıldırım

33.9k14 gold badges86 silver badges99 bronze badges

6 Comments

rikkit Over a year ago

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 a year ago

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 a year ago

You have to install jquery using npm install jquery not with bower.

jwknz Over a year ago

Useful to see how electron deals with the libraries different than a window based app

Ryan Over a year ago

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

|

Michael M. · Accepted Answer · 2023-01-03 02:23:35Z

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>

Vivek Panday · Accepted Answer · 2015-05-07 11:20:07Z

8

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>

answered May 7, 2015 at 11:20

Vivek Panday

1,4462 gold badges17 silver badges34 bronze badges

Comments

Mohit Singh · Accepted Answer · 2015-05-07 10:36:14Z

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>

answered May 7, 2015 at 10:36

Mohit Singh

6,2112 gold badges26 silver badges25 bronze badges

Comments

Ashok kumar · Accepted Answer · 2017-01-14 17:42:53Z

3

In my case solution is really silly, and strange.

Below code was pre-populated by _Layout.cshtml file. (NOT written by me)

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>

But, when I verified in Scripts folder, jquery-1.10.2.min.js was not even available. Hence, replaced code like below where jquery-1.9.1.min.js is an existing file:

<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>

answered Jan 14, 2017 at 17:42

Ashok kumar

1,6205 gold badges36 silver badges74 bronze badges

Comments

Ernani · Accepted Answer · 2017-03-13 17:23:42Z

I'm using NodeJS and got the same error. Like the other answers, the problem was also because JQuery needed to be loaded before Bootstrap; however, because of the NodeJS characteristics, this change had to be aplied in the pipeline.js file.

The change in pipeline.js was like this:

var jsFilesToInject = [
  // Dependencies like jQuery, or Angular are brought in here
  'js/dependencies/angular.1.3.js',
  'js/dependencies/jquery.js',
  'js/dependencies/bootstrap.js',
  'js/dependencies/**/*.js',
];

I'm also using grunt to help, and it automatically changed the order in the main html page:

<!--SCRIPTS-->
  <script src="/js/dependencies/angular.1.3.js"></script>
  <script src="/js/dependencies/jquery.js"></script>
  <script src="/js/dependencies/bootstrap.js"></script>
  <!-- other dependencies -->
<!--SCRIPTS END-->

Hope it helps! You didn't said what your environment was, so I decided to post this answer.

Fabio Souza · Accepted Answer · 2018-05-12 03:06:51Z

1

On official docs: https://electronjs.org/docs/faq#i-can-not-use-jqueryrequirejsmeteorangularjs-in-electron

<head>
  <script>
  window.nodeRequire = require;
  delete window.require;
  delete window.exports;
  delete window.module;
  </script>
  <script type="text/javascript" src="jquery.js"></script>
</head>

answered May 12, 2018 at 3:06

Fabio Souza

314 bronze badges

1 Comment

AnaCS Over a year ago

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"]"

SantoshK · Accepted Answer · 2018-05-31 06:45:02Z

1

If you are using require.js than need to add window.$ = window.jQuery = require('jquery') in app.js

OR you can make dependent file load after parent file loaded.. such as below concept

require.config({
    baseUrl: "scripts/appScript",
    paths: {
        'jquery':'jQuery/jquery.min',
        'bootstrap':'bootstrap/bootstrap.min' 
    },
   shim
    shim: {
        'bootstrap':['jquery'],
        },

    // kick start application
    deps: ['app']
});

Above code shown that bootstrap is dependent on Jquery so i have added in shim and make it dependent

edited May 31, 2018 at 6:45

answered May 24, 2018 at 6:46

SantoshK

1,88718 silver badges24 bronze badges

Comments

Ivan · Accepted Answer · 2018-06-03 18:18:58Z

1

After struggling with this problem I took three steps:

Use jQuery versions anywhere between 1.9.0 and 3.0.0
Declare the jQuery file before declaring the Bootstrap file
Declare these two script files at the bottom of the <body></body> tags rather than in the <head></head>. These worked for me but there may be different behaviors based on the browser you are using.

edited Jun 3, 2018 at 18:18

Ivan

41.3k9 gold badges78 silver badges120 bronze badges

answered Jan 5, 2017 at 0:36

Karisno1

211 bronze badge

Comments

Zarepheth · Accepted Answer · 2016-10-26 22:57:31Z

0

If your code looks good, verify that jQuery successfully loaded to your server. In my case, the jQuery files were published to the server by my IDE, but the web server only had a 0 KB file stub. With no content, the server failed to serve the file to the browser.

After re-publishing the file and verifying that the server actually received the whole file, then my web page stopped giving me the error.

answered Oct 26, 2016 at 22:57

Zarepheth

2,6202 gold badges35 silver badges53 bronze badges

Comments

Jani Devang · Accepted Answer · 2017-02-08 13:03:48Z

0

You need to add JQuery js before adding bootstrap js file, because BootStrap use jqueries function. So make sure to load first jquery js and then bootstap js file.

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

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

answered Feb 8, 2017 at 13:03

Jani Devang

1,10913 silver badges20 bronze badges

Comments

Davut Gürbüz · Accepted Answer · 2017-09-21 11:55:05Z

0

If this occurs IE intranet only, check compatibility settings and uncheck "Display intranet sites in Compatibility mode" .

IE-->settings-->compatibility

answered Sep 21, 2017 at 11:55

Davut Gürbüz

5,7644 gold badges53 silver badges88 bronze badges

Comments

Roshana Pitigala · Accepted Answer · 2018-06-03 11:05:39Z

0

I had tried almost all the above methods.

Finally fixed it by including the

script src="{%static 'App/js/jquery.js' %}"

just after loading the staticfiles i.e {% load staticfiles %} in base.html

edited Jun 3, 2018 at 11:05

Roshana Pitigala

8,8569 gold badges53 silver badges87 bronze badges

answered Jan 27, 2018 at 10:10

kanika

1

Collectives™ on Stack Overflow

Resolving Dependency Order Error: "Bootstrap's JavaScript Requires jQuery" [closed]

14 Answers 14

5 Comments

6 Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

14 Answers 14

5 Comments

6 Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Linked

Related