Jquery UI error - f.getClientRects is not a function

Question

I\'m trying to make Jquery UI work, but it doesn\'t. Here\'s what happens. I\'m loading dependencies:

Answer 1

Adding the jQuery 3 Migrate Plugin resolves this issue as noted here, updated UI will be coming out soon.

---

NOVEMBER 5, 2018 UPDATE

If using latest jQuery and jQuery UI , use latest jQuery migrate to prevent compatibility warnings/issues.

---

Answer 2

Turns out this is a compatibility between jQuery 3.x.x and jQueryUI prior to 1.12.0.

including below script resolved the issue for me.

https://code.jquery.com/jquery-migrate-3.0.0.min.js

Answer 3

After doing all of the updates and STILL having the problem, I just fixed it in the code:

Look for this:

if ( !elem.getClientRects().length ) {
    return { top: 0, left: 0 };
}

Enter this just before it:

if (!elem.getClientRects()) {
    return { top: 0, left: 0 };
}

Answer 4

I updated our legacy site, from jquery 1.12 to jquery 3.5 and hit this same problem. The site is using jquery-ui 1.10 but sadly updating to jquery-ui 1.12 broke other things so I couldnt use that option. Running the production site with the migration plugin felt wrong so instead I looked how this problem was fixed in jquery-ui 1.12.

Patching jquery-ui 1.10 with the fix from jquery-ui github "Position: Guard against passing window to Offset" worked for me.

This is an old post, but if someone like me need to update legacy sites, maybe this information can be useful.

Answer 5

> npm remove jqueryui
> npm i -S jquery-ui-dist

This will download a version of JQuery UI which can be included directly with <script> tags.

Answer 6

I had the same problem when I was trying to get X and Y position of the mouse using " .pageX/.pageY " on a click event.

Try to change the source of the libraries in order to get the latest update of them, making sure that they are compatible.

Those links are now working and they could fix the issues.