How can I using select2 with webpack?

Question

I'm using webpack to manage all my assets, when I use this code to require select2 (https://github.com/select2/select2) I got the error

$(...).select2 is not function.

require.ensure(['./vendors/select2'],function (require) {     require('./site'); }); 

// site.js (function ($) {     $(document).ready(function () {         $(".js-1example-basic-single").select2();     }); })(jQuery); 

I think there is something wrong with module export. I tried many search but no hope.

Anyone please tell me what to do, It took me about 10 hours.

Thank you!

Answer 1

You can run select2 in this way:

import $ from 'jquery'; import 'select2';                       // globally assign select2 fn to $ element import 'select2/dist/css/select2.css';  // optional if you have css loader  $(() => {   $('.select2-enable').select2(); }); 

Answer 2

For anyone using Parcel bundler to load select2, simply importing it didn't work.

I had to initialize it as follows instead:

//Import import $ from 'jquery'; import select2 from 'select2';  //Hook up select2 to jQuery select2($);  //...later $(`select`).select2(); 

Without the hookup call and passing jQuery into the function, it wouldn't bind and result in a $(...).select2 is not function. error.