Bug with custom Elementor widget using latest Elementor

Hi Rose,

I’m having the same issue, the exact 2 errors with the exact stack trace, and I’m not building any custom widget. My issue is even worse: I’m having a simple page with entering fade animations and simple Headings and Icon Boxes and they are not displayed at all, the page displays as blank, basically the animations that should fade in and display the headings and the icon boxes are not showing up and I get a blank page with just the background images.

This didn’t happen before the 3.24 release. Thank you for the recommendation, I switched to 3.23.3 and not the page is displayed correctly.

The team at Elementor should definitively investigate this. I think the issue is in basic Elementor, not in Pro, because I rolled back just Elementor. Now I have Elementor 3.23.3 and Elementor Pro 3.24.1 and all is working well.

yes definitely a bug – missing images when viewing a page whilst logged in due to uncaught errors:

Uncaught TypeError: Cannot read properties of undefined (reading ‘handlers’)
at 820 (frontend.min.js?ver=3.24.3:2:4477)
at webpack_require (webpack-pro.runtime.min.js?ver=3.24.3:2:150)
at 4906 (frontend.min.js?ver=3.24.3:2:4134)
at webpack_require (webpack-pro.runtime.min.js?ver=3.24.3:2:150)
at 3000 (frontend.min.js?ver=3.24.3:2:139)
at webpack_require (webpack-pro.runtime.min.js?ver=3.24.3:2:150)
at frontend.min.js?ver=3.24.3:2:24995
at webpackJsonpCallback (webpack-pro.runtime.min.js?ver=3.24.3:2:5854)
at frontend.min.js?ver=3.24.3:2:69

AND

jquery.min.js?ver=3.7.1:2 Uncaught TypeError: Cannot read properties of undefined (reading ‘tools’)
at Frontend.initOnReadyComponents (frontend.min.js?ver=3.24.5:2:7393)
at Frontend.init (frontend.min.js?ver=3.24.5:2:9297)
at HTMLDocument. (frontend.min.js?ver=3.24.5:2:9523)
at e (jquery.min.js?ver=3.7.1:2:27028)
at t (jquery.min.js?ver=3.7.1:2:27330)

Confirm – rolled back to 3.23.3 and all OK!

I encountered the same issue on Elementor v3.24.7 (with Pro v3.24.4). It seems that when custom widgets use 'elementor-frontend' as a script dependency, it causes a loading order conflict that results in the error.

I was able to resolve the issue by delaying the registration of the script, ensuring it loads later in the script order.

Instead of registering the script directly in the widget constructor like this:
wp_register_script('handle', '/script.js', ['elementor-frontend'], '1.0.0', true);

I moved the registration into an action hook with a higher priority:
add_action( 'wp_enqueue_scripts', function() { wp_register_script('handle', '/script.js', ['elementor-frontend'], '1.0.0', true); }, 999);

This still changes the loading order of the elementor-frontend script, but not as much and prevents the error.

Another option that I found was to not specify the dependancy when registering script and then used get_script_depends() to include 'elementor-frontend'.

• This reply was modified 1 month, 1 week ago by Ahto. Reason: Additional findings

Thank you @ahtonaris ! When you moved the registration into an action hook,

add_action( 'wp_enqueue_scripts', function() { wp_register_script('handle', '/script.js', ['elementor-frontend'], '1.0.0', true); }, 999);

did you add that code to your custom widget php file (custom-widget-01.php) or to the main plugin file that registers the widgets?

When you mentioned the other option, do you mean adding 'elementor-frontend' last (after the custom js ) like below?

public function get_script_depends() {
	return [ 'custom-js-handle', 'elementor-frontend' ];

}

thanks!

@rose18 basically I have setup like this: https://developers.elementor.com/add-javascript-to-elementor-widgets/

and instead of wp_register_script in the class __construct() method you could put the mentioned action hook.

I opted to use the other method and I just tested that it does not matter whether you include the 'elementor-frontend' last of first. This just makes sure that the frontend script gets enqueued, even if no other widget on the page requests it. The widget’s script is anyway wrapped into:
jQuery( window ).on( ‘elementor/frontend/init’, () => { /* class and attachHandler sfuff */ });
and if the script loads before 'elementor-frontend' on the page it does not really matter, atleast for my usecase.

Thank you @ahtonaris ! I have added the action hook in the class __construct() method, and it fixed my issue, thank you so much!