Using Select2 get error - "Error: No select2/compat/query"

Question

I am attempting to use the Select2 library in my site to leverage placecomplete (following it's rather simple configuration steps here), but when I run the code I get a strange error -

Error: No select2/compat/query`

I've tried googling it and it really seems like no one else has encountered this?

My code in a nutshell is,

loading the files...

<link href="scripts/Select2/dist/css/select2.min.css" rel="stylesheet" />
<script src="scripts/Select2/dist/js/select2.min.js"></script>
<script src="scripts/jquery.placecomplete.js">//<![CDATA[//]]></script>

Tagging an input element in my body...

<input id="example123" class="example123" type="text" />

In my document.ready function, calling the following code...

$('#example123').placecomplete({});

and thats where it throws the error.

Any ideas where Im going wrong, and what this error means?

Lacto

1) Did you include jQuery? (sounds dumb but it happens sometimes :) 2) are you sure that the files names are correct and the files are loaded? (Check in your network tab and console) – Slipon

Does it really support input elements rather than only select elements? – Valenevalenka

Answer 1

You are running into two issues here, both of which can easily be fixed.

1. Select2 4.0.0 no longer supports the query option in the slimmed down, standard build. This must be included in the full build (select2.full.js) as it is handled through a backwards compatibility module.

2. You are using Placecomplete and it depends on an older version of Select2. It looks like Select2 3.5.2+ can work, but I can tell from the options that it is using, it cannot work with Select2 4.0.0. There is an open ticket about this for Placecomplete.

Brookbrooke

Can you tell me how to require the full version? I have installed select2 via npm and I have both select2.js and select2.full.js, I require it as require('select2');, how can I do the same to get the full version? – Arresting

require('select2/dist/js/select2.full'); should work – Ultraism

Answer 2

For me, changing the <input /> tag to a <select> tag worked.

Jeth

this is the right answer – Thyme

Answer 3

I've had this when you have two controls on your web page with the same Id - I had a hidden control and a select (the hidden control was first).

Contrabassoon

I'm getting this error with two select2 boxes that have distinct ids. – Amazing

Answer 4

This can also happen if you try to initialize select2 on field type that does not "support" select2, like a hidden field or something along those lines.

Sophisticate