jQuery UI error - f.getClientRects is not a function

I'm trying to make jQuery UI work, but it doesn't. Here's what happens.

I'm loading dependencies:

<script src="assets/src/js/angular/angular.js"></script>
<script src="assets/src/js/angular-animate/angular-animate.js"></script>
<script src="assets/src/js/angular-route/angular-route.js"></script>
<script src="assets/src/js/jquery/dist/jquery.js"></script>
<script src="assets/src/js/jquery-ui/jquery-ui.js"></script>
<script src="assets/src/js/app.js"></script>
<script src="assets/src/js/main.js"></script>

That's my main.js file:

$(function () {
    $("input[type=submit]")
        .button()
        .click(function (event) {
            event.preventDefault();
        });
});


$(function () {
    $("#circum").buttonset();
});

$(function () {
    $("#dialog-message").dialog({
        modal: true,
        buttons: {
            Ok: function () {
                $(this).dialog("close");
            }
        }
    });
});

When I run the code in Brackets jQuery UI is loaded but doesn't work, however, when I comment my main.js file out and then bring it back that's the error I get in the console and UI is suddenly working. It's extremely weird.

jQuery.Deferred exception: elem.getClientRects is not a function TypeError: elem.getClientRects is not a function
at jQuery.offset (http://127.0.0.1:27530/assets/src/js/jquery/dist/jquery.js:9779:14)
at Object.getWithinInfo (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:1157:26)
at jQuery.$.fn.position (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:1179:23)
at _position (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:8709:17)
at ._position (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:415:25)
at open (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:8334:8)
at .open (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:415:25)
at _init (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:8210:9)
at ._init (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:415:25)
at _createWidget (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:587:8) undefined

I've found this thread discussing the issue, but still wasn't able to fix it.

Github

Cheers.

What version is your jQuery UI? I had the same issue with jQuery UI 1.11.4 and jQuery 3.0.
After installing jQuery UI 1.12.0-rc.2, the problem was fixed.

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.

---

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

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 };
}

I had same issue with jquery-3.0.0. I have just included jquery-migrate.3.0.0 reference after jquery reference. Issue is resolved and its working fine now.

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.

> 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.

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.