dotnet/AspNetCore.Docs · error · Error

Bootstrap's JavaScript requires jQuery

Error message

Bootstrap's JavaScript requires jQuery

What it means

The first line of Bootstrap 3.3.7's bootstrap.js checks `typeof jQuery === 'undefined'`. Bootstrap's plugins all wrap `+function($){...}(jQuery)` and need jQuery present at load time. If jQuery is missing or loaded after bootstrap.js, the file fails fast on parse. This is a hard prerequisite guard.

Source

Thrown at aspnetcore/mvc/controllers/testing/samples/3.x/TestingControllersSample/src/TestingControllersSample/wwwroot/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. Include jQuery before bootstrap.js in the HTML.
  2. If using a CDN, add a local fallback: <script>window.jQuery || document.write('<script src="lib/jquery"><\/script>')</script>.
  3. Check the bundling pipeline output to confirm jQuery is emitted first.
  4. Ensure no script errors earlier in the page aborted jQuery's load.

Example fix

// before
<script src="bootstrap.js"></script>
<script src="jquery.js"></script>
// after
<script src="jquery.js"></script>
<script src="bootstrap.js"></script>
Defensive patterns

Strategy: validation

Validate before calling

// Verify jQuery is present before loading Bootstrap-dependent code.
function ensureJQuery() {
  if (typeof window.jQuery === 'undefined') {
    throw new Error('jQuery not loaded; include it before bootstrap.js');
  }
  return window.jQuery;
}
var $ = ensureJQuery();
// then it is safe to reference bootstrap.js

Type guard

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

Try / catch

// The throw happens at script parse; wrap the bootstrap include so a CDN failure is visible.
window.addEventListener('error', function (ev) {
  if (ev && /Bootstrap.*requires jQuery/.test(ev.message || '')) {
    console.error('jQuery failed to load before bootstrap.js');
  }
}, true);

Prevention

When it happens

Trigger: Including bootstrap.js without jQuery; jQuery included after bootstrap.js; jQuery blocked by a script error or CSP; bundle minification dropping jQuery.

Common situations: _Layout.cshtml script ordering; deferred/async script tags reordering execution; ASP.NET Core bundling misconfiguration; CDN jQuery failing to load (404).

Related errors

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