Cannot read properties of undefined (reading 'mouse')

[aparzi]

Hi everyone, I use jquery-ui: 1.13.0 in particullary widget draggable.js, in Angular 12. Bu when I refresh the page I get this error: Uncaught TypeError: Cannot read properties of undefined (reading 'mouse') at draggable.js:39 at draggable.js:35 at draggable.js:37

Could anyone help me? I could possibly also open a pull request because I added a code snippet that handles the error.

Thanks, I'm waiting for updates.

[mgol]

Thanks for the report. Does the issue you describe exist when jQuery UI 1.12.1 is used or only with jQuery UI 1.13.0 or newer? Also, please attach a test case on JS Bin showing the error.

[aparzi]

Hi @mgol, I solved my problem installed jquery-ui-dist: 1.12.1 However the issue happened either with JQuery 1.12.1 but also jQuery UI 1.13.0. My code in angular is:

declare let $: any;

$(document).ready(() => {
    const modalContent: any = $('.modal-content');
    modalContent.draggable({
        handle: '.modal-header'
    });
});

[mgol]

Thanks for the report. Since the issue is already in 1.12, given limited team resources it's not likely to be fixed by the UI team; see the project status at https://blog.jqueryui.com/2021/10/jquery-maintainers-update-and-transition-jquery-ui-as-part-of-overall-modernization-efforts/. PRs are welcome, though.

Note that it would still be easier for whoever wants to look at this to have a working test case on JS Bin.

[aparzi]

Thanks @mgol, my fix just handles undefined parameters, meaning I don't access properties that aren't defined.

[aparzi]

Hi @mgol, what do you think of the fix? should I push it?

[spapaseit]

Hi @aparzi, I'm getting this same error with v1.12.1 and v1.13.1 (on the sortable widget, instead of draggable though).

Installing jquery-ui-dist 1.12.1 made no difference for me. I know it's been a while but, would you mind explaining what you did to fix the problem?

Thanks a lot.

[spapaseit]

It just occurred to me to check the source for sortable.js, and I saw that the "offending" param was $.ui.mouse, so I tried importing the mouse widget and it seems to have worked:

from:

import "jquery-ui/ui/widgets/sortable";

to:

import "jquery-ui/ui/widgets/mouse";
import "jquery-ui/ui/widgets/sortable";

[aparzi]

Hello @spapaseit, I just handled some parameters which could be undefined. Having been a while, I don't remember specifically which classes I changed. If you want I can learn more...

[spapaseit]

Hi @aparzi, don't worry, the approach of my comment above works fine. I appreciate the offer, thanks!