dianping/cat · critical · Error

Bootstrap's JavaScript requires jQuery

Error message

Bootstrap's JavaScript requires jQuery

What it means

Line 7 of bootstrap.js is a hard guard executed at file load: if the global jQuery symbol is undefined when bootstrap.js is evaluated, the whole script aborts with this error. Bootstrap 3 is a jQuery plugin and every component (defined via +function ($) {...}) needs $ to attach to $.fn, so it refuses to load without it.

Source

Thrown at cat-home/src/main/webapp/assets/js/uncompressed/bootstrap.js:7

/*!
 * Bootstrap v3.2.0 (http://getbootstrap.com)
 * Copyright 2011-2014 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

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

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


+function ($) {
  'use strict';

  // CSS TRANSITION SUPPORT (Shoutout: http://www.modernizr.com/)
  // ============================================================

  function transitionEnd() {
    var el = document.createElement('bootstrap')

View on GitHub (pinned to e815e74d4c)

Solutions

  1. Ensure jQuery <script> tag appears before bootstrap.js and both paths resolve (check the Network tab for 404s).
  2. If using a bundler, declare jquery as a dependency of bootstrap so order is guaranteed (require('jquery') before require('./bootstrap.js')).
  3. Avoid jQuery.noConflict(true) removing the global before bootstrap loads, or load bootstrap via the same module scope.
  4. Use jQuery 1.9.1–3.x compatible with Bootstrap 3.2.0 (it needs $.fn.emulateTransitionEnd era APIs).

Example fix

// before
<script src="assets/js/uncompressed/bootstrap.js"></script>
<script src="assets/js/uncompressed/jquery.js"></script>

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

Strategy: validation

Validate before calling

if (typeof window.jQuery === 'undefined') {
  console.error('jQuery missing: bootstrap.js will not load. Check script order/404s.');
}

Type guard

function jqueryReady() { return typeof window.jQuery === 'function'; }

Prevention

When it happens

Trigger: Loading bootstrap.js before jquery.js in the page; loading jQuery with a module loader (AMD/CommonJS misconfiguration) so no window.jQuery global exists; a typo'd jQuery script path so jQuery silently 404s; jQuery loaded with noConflict wiping the global after bootstrap's check but before use.

Common situations: Wrong script order in JSP/HTML templates (this repo serves assets from cat-home webapp); bundling/concatenation scripts that alphabetize files putting bootstrap before jquery; CDN jQuery blocked while local bootstrap loads; using jquery.slim under the assumption it is full jQuery (works here, but often confused).

Related errors


AI-assisted analysis of dianping/cat@e815e74d4c (2026-08-14). Data as JSON: /api/errors/be26a5a07172f997. Report an issue: GitHub.