How to fix 'Uncaught TypeError: Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript.' while jQuery is first

Question

I've built myself a custom WordPress theme that uses Bootstrap 4. It's based on the Roots Sage 8.6.0 starter theme. All theme scripts, including Bootstrap, are compiled into a main.js file. The main.js is enqueued with jQuery as a dependency.

You can see it here: https://www.patrickiverson.com/

As the error states, Bootstrap's scripts require jQuery to be loaded first, which seems to be done and I've verified by viewing my source code. See below (I removed all the CDATA, but this was copied from the "View Page Source" while on my homepage). jQuery is the very first script loaded, and my main.js is second-to-last.

I'm still getting the "Uncaught TypeError: Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript." error. It is breaking other functionality, such as an auto-hiding navbar, and a filter on my portfolio.

I'm using the Roots Soil 3.8.1 plugin as well, which has a feature to move all js to the footer. I've turned that off and on. I've recompiled my theme scripts. I've uninstalled various plugins as well. Nothing seems to eliminate that error.

<script src="/wp-includes/js/jquery/jquery.js"></script>
<script src="/wp-includes/js/jquery/jquery-migrate.min.js"></script>
<script src="/wp-content/plugins/contact-form-7/includes/js/scripts.js"></script>
<script src="/wp-content/plugins/responsive-lightbox-lite/assets/nivo-lightbox/nivo-lightbox.min.js"></script>
<script src="/wp-content/plugins/responsive-lightbox-lite/assets/inc/script.js"></script>
<script src="/wp-content/plugins/wordfence/js/admin.ajaxWatcher.1560275180.js"></script>
<script src="/wp-content/plugins/wpcf7-redirect/js/wpcf7-redirect-script.js"></script>
<script src="/wp-content/themes/clean2019/dist/scripts/main-6b986a9ffc.js"></script>
<script src="/wp-content/themes/clean2019/dist/scripts/loadmore-158c6c3f18.js"></script>

I expect that since jQuery seems to be loaded first Bootstrap wouldn't be throwing this error. Thank you in advance!

W Kenny · Accepted Answer · 2020-01-15 07:37:25Z

0

Add the following script into the index.html of last row of < head >

<!-- jquery -->
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<!-- [/] jquery -->

<!-- bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!-- [/] bootstrap -->

answered Jan 15, 2020 at 7:37

W Kenny

2,1091 gold badge25 silver badges37 bronze badges

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

Collectives™ on Stack Overflow

How to fix 'Uncaught TypeError: Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript.' while jQuery is first

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related