Bootstrap throws Uncaught Error: Bootstrap's JavaScript requires jQuery

Jquery Html Css Twitter Bootstrap Twitter Bootstrap-3

Jquery Problem Overview

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?

Jquery Solutions

Solution 1 - Jquery

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

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

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

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

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>

Solution 6 - Jquery

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>

Solution 7 - Jquery

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.

Solution 8 - Jquery

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.

Solution 9 - Jquery

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

Solution 10 - Jquery

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.

Solution 11 - Jquery

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>

Solution 12 - Jquery

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

IE-->settings-->compatibility

Solution 13 - Jquery

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

Solution 14 - Jquery

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>

Content Type	Original Author	Original Content on Stackoverflow
Question	user3327457	View Question on Stackoverflow
Solution 1 - Jquery	Sridhar R	View Answer on Stackoverflow
Solution 2 - Jquery	Onur Yıldırım	View Answer on Stackoverflow
Solution 3 - Jquery	124	View Answer on Stackoverflow
Solution 4 - Jquery	Vivek Panday	View Answer on Stackoverflow
Solution 5 - Jquery	Mohit Singh	View Answer on Stackoverflow
Solution 6 - Jquery	Ashok kumar	View Answer on Stackoverflow
Solution 7 - Jquery	Karisno1	View Answer on Stackoverflow
Solution 8 - Jquery	Ernani	View Answer on Stackoverflow
Solution 9 - Jquery	SantoshK	View Answer on Stackoverflow
Solution 10 - Jquery	Zarepheth	View Answer on Stackoverflow
Solution 11 - Jquery	Jani Devang	View Answer on Stackoverflow
Solution 12 - Jquery	Davut Gürbüz	View Answer on Stackoverflow
Solution 13 - Jquery	kanika	View Answer on Stackoverflow
Solution 14 - Jquery	Fabio Souza	View Answer on Stackoverflow