bootstrap's javascript requires jquery version 1.9.1 というエラー文言で、
検索されることが多くあり、このエラーについて興味をもったので、
何が原因で起こるのか調べてみました。

どこでエラーが出力されているのか?

bootstrap 3 の、 bootstrap.js または、bootstrap..min.js で出力されます。
bootstrap 3 の version により、微妙にエラーメッセージは異なるようで、
version 3.3.5、version 3.3.6、version 3.3.7 で以下のような実装になっています。

  • version 3.3.5
    'Bootstrap's JavaScript requires jQuery version 1.9.1 or higher'
    と出力されます。

    /*!
 * Bootstrap v3.3.5 (http://getbootstrap.com)
 * Copyright 2011-2015 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)) {
    throw new Error('Bootstrap\'s JavaScript requires jQuery version 1.9.1 or higher')
  }
}(jQuery);

  • version 3.3.6
    'Bootstrap's JavaScript requires jQuery version 1.9.1 or higher, but lower than version 3'
    と出力されます。 3.3.5 の時はなかった, but lower than version 3 が付与されています。
    Bootstrap 3.3.6 and JQuery 3.1.0 not compatible? - Stack Overflow
    に記載がありますが、3.3.6 は jquery の 3 とは互換性はないようで、
    1.9.1 から、2.2.4 [2017/07/17時点の最新]であれば動くという意味のようです。
    ちなみに、このBlog で使っている Bootstrap の version は 3.3.6 のようで、
    このエラーメッセージが出力されていました。

    /*!
 * Bootstrap v3.3.6 (http://getbootstrap.com)
 * Copyright 2011-2015 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] > 2)) {
    throw new Error('Bootstrap\'s JavaScript requires jQuery version 1.9.1 or higher, but lower than version 3')
  }
}(jQuery);

  • version 3.3.7
    'Bootstrap's JavaScript requires jQuery version 1.9.1 or higher, but lower than version 4'
    と出力されます。 3.3.6 ではサポートできていなかっった jquery 3 へのサポートが追加されています。
    Bootstrap 3.3.7 がリリース：jQuery 3 のサポートなど追加 | UX MILK

    /*!
 * 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);

  • version 3.2.0
    ちなみに、version のチェックが入るようになったのは、3.3.0 からのようで、
    3.2.0では、version のチェックはなく、jquery の必須チェックのみを行なっています。

    /*!
 * 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') }

どのような状況でこのエラーが出力されるのか?

下記、状況で、エラーが発生するのではないかと思います。
このブログでは 3. の状況で発生しておりました。

  1. もともと、css framework を使っていなかったサイトで、途中から、Bootstrap 3 を導入した。

  2. もともと、Bootstrap 2 を使っていて、途中から、Bootstrap 3 を導入した。1
    bootstrap 2.3.2 のjavascript を見る限り、jquery のチェックは行なっていないようです。

  3. もともと、Bootstrap 3.2 系以下、を使っていて、 Bootstrap3.3 以上に更新を行なった。2
    bootstrap 3.2.0 のjavascript を見る限り、jquery の必須チェックのみ行なっているようです。

サイト上で、効いているjquery の version 情報を調べる

現在利用しているjQueryのバージョンを確認するには？ - Build Insider

Chrome などで、コンソールから、$.fn.jquery を実行すると、
jquery の version 情報を取得できます。
このversionが、1.9.1 よりも古ければ、エラーが出力されているのかと思います。

対処方法

対処方法として、2つ考えられます。

  1. サイトのJQuery の バージョンを Bootstrap の互換バージョンまで、バージョンアップする。
    これが正攻法な気がします。ただサイトの規模によってはこの方法がとれないことのあるのではと思います。

  2. jQuery.noConflict を使って回避する
    読み込み時に工夫は必要だと思いますが、
    Bootstrap 内では、$関数に直接アクセスがないようなので、この方法もとれそうです。

以上です。

コメント

カテゴリー

最近の投稿