jQuery-UI widget breaks if using as a module

[MhMadHamster]

Hello, currently in our project we are using jquery-ui widgets as a separate modules like this:

import dialog from "jquery-ui/ui/widgets/dialog";

dialog({ ...options }, document.querySelector(".some-element");

However in 1.13.0 we cant use widgets this way, now it fails to initialize a widget with an error:
Uncaught TypeError: Cannot read properties of undefined (reading '_createWidget')

Even though you still able to use widgets "normally":

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

$(".some-element").dialog({ ...options });

would be nice to fix this issue, especially since it looks unintended.

I believe problem was introduced in this commit: 70dae67
By adding "use strict" now this code: https://github.com/jquery/jquery-ui/blob/1.13.0/ui/widget.js#L80 fails, since this is undefined.

[mgol]

Thanks for the report. I wonder what was the intention when this is not passed; perhaps to just evaluate that if contidion to a falsy value? Maybe we just need to check for this as well.

Planning the fix for 1.13.1.

[mgol]

The check causing an issue is:

		// Allow instantiation without "new" keyword
		if ( !this._createWidget ) {
			return new constructor( options, element );
		}

So, basically, this is a duck-typing check to make sure we've got a widget instance and not another object. In most cases it works even now but if you save the constructor to a variable and call it directly, no this will be set while previously it'd be the global object. When not used as a module, you'd call it via $.ui.dialog(...) so this would be $.ui.

Adding a check for this being truthy should be enough then, I'll submit a fix shortly.

For your case, before UI 1.13.1 is available, you can workaround the issue by changing your code to:

import dialog from "jquery-ui/ui/widgets/dialog";

dialog.call($.ui, { ...options }, document.querySelector(".some-element");

or:

import dialog from "jquery-ui/ui/widgets/dialog";

dialog.call(window, { ...options }, document.querySelector(".some-element");

Of course, I understand the feasibility of this depends on how many of these imports you have. 🙂

[mgol]

PR with a fix: #2019.

[mgol]

jQuery UI 1.13.1 including a fix for this issue has been released: https://blog.jqueryui.com/2022/01/jquery-ui-1-13-1-released/.