ReferenceError: jQuery is not defined

[mbiokyle29]

I am getting a jQuery is not defined error when trying to use the bootstrap-webpack plugin.

Here is my webpack.config.json

module.exports = {
    context: __dirname + "/src/",
    entry: "./jass.js",
    output: {
        path: __dirname + "/dist/",
        filename: "./bundle.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style!css" },
            { test: /\.woff\d*$/,   loader: "url-loader?limit=10000&minetype=application/font-woff" },
            { test: /\.ttf$/,    loader: "file-loader" },
            { test: /\.eot$/,    loader: "file-loader" },
            { test: /\.svg$/,    loader: "file-loader" },
        ]
    },
};

And here is my entry script

require("jquery");
require("bootstrap-webpack");
require('./style.css');

I have tried multiple different proposed solutions on SO but nothing seems to work. It seems that the issue is specifically in the bootstrap transition package.

This is from my bundle.js script

/* 11 */
/***/ function(module, exports, __webpack_require__) {

    /* ========================================================================
     * Bootstrap: transition.js v3.3.2
     * http://getbootstrap.com/javascript/#transitions
     * ========================================================================
     * Copyright 2011-2015 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')

        var transEndEventNames = {
          WebkitTransition : 'webkitTransitionEnd',
          MozTransition    : 'transitionend',
          OTransition      : 'oTransitionEnd otransitionend',
          transition       : 'transitionend'
        }

        for (var name in transEndEventNames) {
          if (el.style[name] !== undefined) {
            return { end: transEndEventNames[name] }
          }
        }

        return false // explicit for ie8 (  ._.)
      }

      // http://blog.alexmaccaw.com/css-transitions
      $.fn.emulateTransitionEnd = function (duration) {
        var called = false
        var $el = this
        $(this).one('bsTransitionEnd', function () { called = true })
        var callback = function () { if (!called) $($el).trigger($.support.transition.end) }
        setTimeout(callback, duration)
        return this
      }

      $(function () {
        $.support.transition = transitionEnd()

        if (!$.support.transition) return

        $.event.special.bsTransitionEnd = {
          bindType: $.support.transition.end,
          delegateType: $.support.transition.end,
          handle: function (e) {
            if ($(e.target).is(this)) return e.handleObj.handler.apply(this, arguments)
          }
        }
      })
    }(jQuery);

Finally here is the output when I run webpack-dev-server

webpack-dev-server --watch --hot --content-base dist/
http://localhost:8080/webpack-dev-server/
webpack result is served from /
content is served from /home/kyle/Dev/jass/dist
Hash: 6d41dd2df232826645f1
Version: webpack 1.5.3
Time: 2721ms
                                 Asset    Size  Chunks             Chunk Names
  f4769f9bdb7466be65088239c12046d1.eot   20127          [emitted]  
  e18bbf611f2a2e43afc071aa2f4e1512.ttf   45404          [emitted]  
  89889688147bd7575d6327160d64e760.svg  108738          [emitted]  
448c34a56d699c29117adc64c43affeb.woff2   18028          [emitted]  
 fa2772327f55d8198301fdb8bcfc8158.woff   23424          [emitted]  
                           ./bundle.js  503429       0  [emitted]  main
chunk    {0} ./bundle.js (main) 471297 [rendered]
    [0] ./src/jass.js 72 {0} [built]
    [1] ./~/bootstrap-webpack/index.js 122 {0} [built]
    [2] ./src/style.css 950 {0} [built]
    [3] ./~/css-loader!./src/style.css 264 {0} [built]
    [4] ./~/jquery/dist/jquery.js 247387 {0} [built]
    [5] ./~/style-loader/addStyles.js 5507 {0} [built]
    [6] ./~/bootstrap-webpack/bootstrap-scripts.loader.js!./~/bootstrap-webpack/bootstrap.config.js 392 {0} [built]
    [7] ./~/css-loader/cssToString.js 352 {0} [built]
    [8] ./~/bootstrap-webpack/~/style-loader!./~/bootstrap-webpack/~/css-loader!./~/bootstrap-webpack/~/less-loader!./~/bootstrap-webpack/bootstrap-styles.loader.js!./~/bootstrap-webpack/bootstrap.config.js 630 {0} [built]
    [9] ./~/bootstrap-webpack/~/css-loader!./~/bootstrap-webpack/~/less-loader!./~/bootstrap-webpack/bootstrap-styles.loader.js!./~/bootstrap-webpack/bootstrap.config.js 148336 {0} [built]
   [10] ./~/bootstrap-webpack/~/style-loader/addStyle.js 717 {0} [built]
   [11] ./~/bootstrap/js/transition.js 1831 {0} [built]
   [12] ./~/bootstrap/js/alert.js 2260 {0} [built]
   [13] ./~/bootstrap/js/button.js 3274 {0} [built]
   [14] ./~/bootstrap/js/carousel.js 7121 {0} [built]
   [15] ./~/bootstrap/js/collapse.js 5979 {0} [built]
   [16] ./~/bootstrap/js/dropdown.js 4696 {0} [built]
   [17] ./~/bootstrap/js/modal.js 9343 {0} [built]
   [18] ./~/bootstrap/js/tooltip.js 15103 {0} [built]
   [19] ./~/bootstrap/js/popover.js 3278 {0} [built]
   [20] ./~/bootstrap/js/scrollspy.js 4697 {0} [built]
   [21] ./~/bootstrap/js/tab.js 3789 {0} [built]
   [22] ./~/bootstrap/js/affix.js 4789 {0} [built]
   [91] ./~/bootstrap/fonts/glyphicons-halflings-regular.eot 81 {0} [built]
   [92] ./~/bootstrap/fonts/glyphicons-halflings-regular.ttf 81 {0} [built]
   [93] ./~/bootstrap/fonts/glyphicons-halflings-regular.svg 81 {0} [built]
   [94] ./~/bootstrap/fonts/glyphicons-halflings-regular.woff2 83 {0} [built]
   [95] ./~/bootstrap/fonts/glyphicons-halflings-regular.woff 82 {0} [built]

I am wondering if you have any tips on getting this figured out. Thanks for your time and thanks for developing/maintaining this package!

-Kyle

[gowravshekar]

You need to expose the (jquery, $) variables for other third party libraries to use.
Use this in your entry script

require('expose?$!expose?jQuery!jquery');

Also webpack as an argument called --display-error-details that will help you debug stuff like this.

[mbiokyle29]

This fixed it. Thank you very much!