` then ``."}}]}]}

dotnet/AspNetCore.Docs · critical · Error

Bootstrap's JavaScript requires jQuery

Error message

Bootstrap's JavaScript requires jQuery

What it means

Bootstrap 3.3.7's bootstrap.js throws at load time if `typeof jQuery === 'undefined'`. Bootstrap is a jQuery plugin and attaches its components to `$.fn`, so it cannot initialize without jQuery present on the global scope first.

Source

Thrown at aspnetcore/mvc/views/tag-helpers/th-components/samples/RazorPagesSample/wwwroot/lib/bootstrap/js/bootstrap.js:8

/*!
 * Bootstrap v3.3.7 (http://getbootstrap.com)
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under the MIT license
 */

if (typeof jQuery === 'undefined') {
  throw new Error('Bootstrap\'s JavaScript requires jQuery')
}

+function ($) {
  'use strict';
  var version = $.fn.jquery.split(' ')[0].split('.')
  if ((version[0] < 2 && version[1] < 9) || (version[0] == 1 && version[1] == 9 && version[2] < 1) || (version[0] > 3)) {
    throw new Error('Bootstrap\'s JavaScript requires jQuery version 1.9.1 or higher, but lower than version 4')
  }
}(jQuery);

/* ========================================================================
 * Bootstrap: transition.js v3.3.7
 * http://getbootstrap.com/javascript/#transitions
 * ========================================================================
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 * ======================================================================== */

View on GitHub (pinned to c67a80103a)

Solutions

  1. Ensure jQuery is included before Bootstrap: `<script src="lib/jquery/jquery.js"></script>` then `<script src="lib/bootstrap/js/bootstrap.js"></script>`.
  2. Verify the jQuery file actually loads (check Network tab for 200, not 404).
  3. If using a bundler, set the correct order in the bundle config and expose jQuery globally (`window.jQuery = window.$ = require('jquery')`).
  4. Pin jQuery to a version in Bootstrap's supported range (1.9.1 – <4 for Bootstrap 3).

Example fix

<!-- before -->
<script src="lib/bootstrap/js/bootstrap.js"></script>
<script src="lib/jquery/jquery.js"></script>

<!-- after -->
<script src="lib/jquery/jquery.js"></script>
<script src="lib/bootstrap/js/bootstrap.js"></script>
Defensive patterns

Strategy: validation

Validate before calling

// In a bootstrap module loaded before anything else:
if (typeof window.jQuery === 'undefined') {
  throw new Error('Load jQuery before Bootstrap');
}
require('./bootstrap');

Type guard

function jQueryReady() {
  return typeof window !== 'undefined' && typeof window.jQuery === 'function';
}

Try / catch

// Not typically caught — load-order fix is the remedy.
// Bundler-safe: import jquery first, assign globals, then bootstrap.
import jQuery from 'jquery';
window.jQuery = window.$ = jQuery;
require('bootstrap');

Prevention

When it happens

Trigger: Loading bootstrap.js before jquery.js, or loading bootstrap.js in an environment where jQuery was never included. The check runs at script parse time, so the throw is immediate.

Common situations: Script bundle ordering wrong (bootstrap bundled before jquery); jQuery loaded via AMD/module while bootstrap expects a global; jQuery failed to load (404 on the CDN); bundler stripped jQuery as an unused dep.

Related errors

AI-assisted analysis of dotnet/AspNetCore.Docs@c67a80103a (2026-08-13). Data as JSON: /api/errors/1670bc71fdff2154. Report an issue: GitHub.