Bootstrap JS incompatible with noConflict(true) jQuery
Created by: daguej
Because Bootstrap's JS wrapper anonymous function references jQuery globally...
+function ($) { "use strict";
...
}(window.jQuery);
... (the window.jQuery
part), an error gets thrown if you use $.noConflict(true)
and hang on to the reference internally.
I'm running into this with a module loading system (much like node's) which keeps the application's jQuery reference internal. (My application cannot leak anything into global scope, and must be able to cope with different jQuery versions that might be loaded by a host page.)
Bootstrap's JS files are loaded as modules and wrapped by the module system, so they end up looking like this:
function(window, jQuery, $, undefined) {
+function($) { "use strict";
...
}(window.jQuery);
}
The outer function is invoked by the module loader with the internal jQuery passed in.
However, the Bootstrap code only sees $
as undefined
since window.jQuery
does not exist.
This can be resolved by Bootstrap's wrapper simply referencing jQuery
(dropping the window.
). I can't think of a downside of doing this (it won't break anything), and adds flexibility for situations like mine.