Uncaught error bootstrap s javascript requires jquery

What is Bootstrap? #

Bootstrap is a framework developed by Mark Otto and Jacob Thornton from the Twitter team, then on August 19, 2011, it became an open-source project so every developer in the world is able to contribute to the project.

Bootstrap’s design direction is mobile-first, so we can use it to build responsive, mobile-first sites easily, plus we can use plugins in our sites like date picker, dropdowns, and much more which are built by jQuery.

Bootstrap removed the dependency on jQuery on Bootstrap 5 and moved to vanilla JavaScript.

What is jQuery? #

jQuery is a JavaScript library that gives you the ability to write less code than usual to do things like manipulating the DOM, animation, AJAX, etc.

It’s a free open-source project with a permissive MIT license, and most of the sites on the web are using it.

jQuery also provides cross-browser functionality which makes the site work without problems on a lot of different browsers versions, and that is great if your goal is to cover a big range of browsers so you need to support the legacy browsers.

Bootstrap 4 and below are using the jQuery library to make plugins and widgets for us to use on our sites while developing with Bootstrap.

The Solutions #

Solution 1: Order the requests of files correctly

This is the most basic solution, and it solves the problem if you are requesting the files through CDN ( Content Delivery Network  ) like jsDelivr or others.

Now we need to request the Bootstrap JavaScript file and its dependencies like jQuery and popper, so everything works normally.

It’s preferable to include those script elements before the body element so we know for sure that the DOM is loaded, so we include them in this order: 

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

The jQuery file must come first because the other files depend on it, then the popper file and the last file is the Bootstrap JavaScript file.

Solution 2: Use older jQuery and Bootstrap versions to support older browsers

If you need to support older browsers like Internet Explorer 8, you have to use jQuery’s 1.x version and Bootstrap’s  3.4 version.

So you will need to include the CDNs requests to the jQuery and Bootstrap js files, and preferably to include them before the «body» element like the following:

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

Solution 3: Load jQuery with require.js

If the above solutions didn’t solve the error, you can use require.js to load jQuery through CDN link.

Require.js is a Javascript file or module loader which improves the speed and quality of the code.

First, you need to download the require.js file from here, then move this file to your script directory which is called in this example «script».

Now make 2 more JavaScript files, one for the require.js config called «app.js» in your «script» directory, and a file for requiring the jQuery logic called «main.js» in your «script» directory.

The «app.js» should have the config for require.js for this example like the following:

requirejs.config({
    "baseUrl": "script",
    "paths": {
      "jquery": "//cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min"
    }
});

requirejs(["main"]); // including main.js

The «main.js» file which is included at the end of the above code should have the logic for requesting jQuery like the following:

define(["jquery"], function($) {
    console.log($); // for testing
});

Finally, we include this script element before any script in our HTML file to load «require.js» first, then load the «app.js» file as the following: 

<script data-main="script/app" src="script/require.js"></script>

The Conclusion

In this article, we introduced the Bootstrap framework and jQuery library, learned what are the solutions to solve «Uncaught error: bootstrap’s javascript requires jquery» error like how to include the CDNs requests in the appropriate order,  we learned also to use older versions of jQuery and Bootstrap to support legacy browsers like Internet Explorer 8, and how to load jQuery with require.js Thanks for reading till the end and I hope you managed to resolve the error.