NodeJS with webpack jQuery.Deferred exception: o(…).select2 is not a function TypeError: o(…).select2 is not a function

Question

I'm modifying my application to use nodejs and browserify via gulp to produce one minified js.
I've switched from loading dependencies manually and updating manually to installing them with npm.

Everything went smooth, but when I wanted to install select2 it started throwing errors all over the place. When I moved my removed manual updated file for the npm required() file.

jquery.js:3841 jQuery.Deferred exception: o(...).select2 is not a function TypeError: o(...).select2 is not a function
at i.init (https://www.example.com/newstyle/js/closure.js?time=1559747711:1:5612)
at i.sysInit (https://www.example.com/newstyle/js/closure.js?time=1559747711:1:108153)
at i (https://www.example.com/newstyle/js/closure.js?time=1559747711:1:106602)
at new i (https://www.example.com/newstyle/js/closure.js?time=1559747711:1:5333)
at HTMLSelectElement. (https://www.example.com/newstyle/js/closure.js?time=1559747711:1:108496)
at Function.each (https://www.example.com/newstyle/js/closure.js?time=1559747711:1:200628)
at _.fn.init.each (https://www.example.com/newstyle/js/closure.js?time=1559747711:1:199273)
at _.fn.init.d.fn.(anonymous function) [as FormDropdownHandler] (https://www.example.com/newstyle/js/closure.js?time=1559747711:1:108384)
at HTMLDocument. (https://www.example.com/newstyle/js/closure.js?time=1559747711:1:108696)
at HTMLDocument.dispatch (https://www.example.com/newstyle/js/closure.js?time=1559747711:1:240241) undefined

dropdown.module.js:53 Uncaught TypeError: o(...).select2 is not a function
at i.init (dropdown.module.js:53)
at i.sysInit (oc.foundation.base.js:157)
at i (oc.foundation.base.js:20)
at new i (dropdown.module.js:19)
at HTMLSelectElement. (oc.foundation.base.js:191)
at Function.each (jquery.js:367)
at _.fn.init.each (jquery.js:202)
at _.fn.init.d.fn.(/anonymous function) [as FormDropdownHandler] (https://www.example.com/newstyle/js/closure.js?time=1559747711:1:108384)
at HTMLDocument. (oc.foundation.base.js:213)
at HTMLDocument.dispatch (jquery.js:5237)

The code I'm using is:

<select name="pickup_point">
    <option value="1" >all work</option>
    <option value="4" >no play</option>
    <option value="5" >dull boy</option>
</select>

and the javascript:

$ = require('jquery');
require('select2');
$(document).ready(function(){
    $('select').select2();
});

How can I get select2 working when I require it in the index.js file?

Answer 1

Took me a while to piece together what goes wrong here.

It comes down to that Select2 uses it's own loader and factory function to initialize itself, which doesn't get called by default. You need to call it manually.

If you have a window object and registered jQuery to the window object you can call Select2 as follows once in your main javascript file:

window.$ = window.jQuery = require('jquery);
require('select2')();

or if you prefer variables instead of calling the function on require directly:

window.$ = window.jQuery = require('jquery);
var select2Initialisator = require('select2');
select2Initialisator();

If you like to work with scopes or different versions of jQuery, you can also pass the jQuery instance you wish to register the select2 to, to select2 factory constructor as follows

 var jQuery = require('jquery');
 require('select2')(jQuery);