[BUG] `Uncaught TypeError: $(...).select2 is not a function` with `4.1.0-rc.0 `

[RafaelKr]

I just wasted an hour because npm installed version 4.1.0-rc.0. With 4.0.13 everything works as expected.

I'm using webpack and imported it with import 'select2'

When running

$('.select2').select2()

I get the error Uncaught TypeError: $(...).select2 is not a function

I'm not sure if it's related to using webpack or because I'm using jQuery v3.6.0 (the release notes say The minimum jQuery version supported is the latest version in the 1.x, 2.x, and 3.x series). But in either way it definitely should either work or output a better error message.

Additional Notes

I had to add the following webpack config (using laravel-mix) because I'm unfortunately have to use WordPress and jQuery is loaded via an own script tag, not included in the webpack bundle:

mix.webpackConfig({
	externals: {
		$: 'jQuery',
		jquery: 'jQuery',
	}
})

without this config select2 won't attach to jQuery.fn

[MattBudz]

This is not isolated to webpack. I can confirm this error occurs when using 4.1.0-rc.0 from CDN's also.

[RafaelKr]

@kevin-brown I think it would be helpful to make 4.0.13 the default release on npm for now, this would've saved me a lot of time.

But still thanks for this library! Of course it would still have cost me even more time writing my multiselect by myself :)

[kevin-brown]

That's weird because I use Select2 via the browser from a CDN when I'm doing testing and haven't hit any issues there. I have this marked as a possible bug because webpack and other loader-related issues are notoriously hard to pin down.

We haven't made any changes (other than removing calls to $.inArray) to the loader in years so I'm not sure what would have changed in 4.1.x that would be causing issues.

[AnotherOneAckap]

For me it was an obfuscator or compressor, which turns var jQuery into var jquery. I didn't find which one, left it to frontend ninjas

[MattBudz]

If I save the select2.js or the select2.min.js file from the CDN and add it to webpack as a pack or module, there is no error and it works as expected. BUT if I add the js from the CDN using a script tag, I get the error. Additionally, if I install via npm, I also get the error.

[RafaelKr]

I was just trying to build a minimal reproduction and I couldn't reproduce it anymore, it was working. In my main project I removed node_modules and package-lock.json and did an npm install and now it's also working there. I don't know what changed...

I'll keep this open for now due to the other reports here.

[nyrf]

I use vite, it seems no versions can work.

[mckaygerhard]

i am using lasted and also 4.0.13 adn got same error:

[pelika]

Not working with ckeditor.

Uncaught TypeError: $(...).select2 is not a function

The error popup after ckeditor initiated. Older versions have this problem too.

[nzy]

This works:

import select2 from 'select2';
select2();

or

import("select2").then(m => m.default());

and later

$(el).select2()

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[mckaygerhard]

i'm not tested.. pretty busy but still must be open this issue to remain in kowledge

This works:

import select2 from 'select2';
select2();

or

import("select2").then(m => m.default());

and later

$(el).select2()

[monab]

This works:

import select2 from 'select2';
select2();

or

import("select2").then(m => m.default());

and later

$(el).select2()

Saved a lot of my time and energy!! Thank you so much!!

[aslam]

I had to do the following to initialise select2 properly:

import select2 from 'select2';
select2($);

I include and setup jQuery like this:

import jquery from 'jquery';

window.jQuery = jquery;
window.$ = jquery;

[hamza2262]

This works:

import select2 from 'select2';
select2();

or

import("select2").then(m => m.default());

and later

$(el).select2()

It really Works for me

[bcostind]

When I run "npm run build" I have the same problem and I tried everything but its not working. This js lines should be added to app.js from resources/js folder? import select2 from 'select2'; select2();

[mckaygerhard]

dont use npm crap

[SuryaWebfox]

I had to do the following to initialise select2 properly:

import select2 from 'select2';
select2($);

I include and setup jQuery like this:

import jquery from 'jquery';

window.jQuery = jquery;
window.$ = jquery;

The problem with this is that it works with npm run dev but not with npm run build when it throws an error 'default' is not exported by node_modules/select2/dist/js/select2.js when using Vite

[FenSongChuan]

import select2 from 'select2';
select2();

In vue+typescript, This expression is not callable. Type 'typeof import("/node_modules/@types/select2/index")' has no call signatures. How to solve it

[dog-95]

@FenSongChuan

declare module 'select2' {
     function select2($: JQueryStatic): void;

    export= select2;
}

import select2 from "select2"; select2($)