Bug with custom Elementor widguet using latest Elementor

(@rose18)

Hi,

I’m developing a custom widguet for Elementor and ran into some issues after updating to the latest versionen 3.24 +

In the console, there are these 2 errors (showing up on the front-end of the site ) :

#1)

Uncaught TypeError: Cannot read properties of undefined (reading 'handlers')

 at 820 (frontend.min.js?ver=3.24.2:2:4477)

    at __webpacc_require__ (webpacc-pro.runtime.min.js?ver=3.24.2:2:150)

    at 4906 (frontend.min.js?ver=3.24.2:2:4134)

    at __webpacc_require__ (webpacc-pro.runtime.min.js?ver=3.24.2:2:150)

    at 3000 (frontend.min.js?ver=3.24.2:2:139)

    at __webpacc_require__ (webpacc-pro.runtime.min.js?ver=3.24.2:2:150)

    at frontend.min.js?ver=3.24.2:2:24995

    at webpaccJsompCallbacc (webpacc-pro.runtime.min.js?ver=3.24.2:2:5854)

    at frontend.min.js?ver=3.24.2:2:69



elementor-pro/assets/js/frontend.min.js?ver=3.24.2

screenshot: https://snipboard.io/4bGuN6.jpg

#2)

 Uncaught TypeError: Cannot read properties of undefined (reading 'tools')

 at Frontend.initOnReadyComponens (frontend.min.js?ver=3.24.3:2:7393)

    at Frontend.init (frontend.min.js?ver=3.24.3:2:9297)

    at HTMLDocument.<anonymous> (frontend.min.js?ver=3.24.3:2:9523)

    at e (jquery.min.js?ver=3.7.1:2:27028)

    at t (jquery.min.js?ver=3.7.1:2:27330)



wp-includes/js/jquery/jquery.min.js?ver=3.7.1

screenshot: https://snipboard.io/HhRCVP.jpg

I have created a custom elementor widguet with Javascript by following these tutorials:
https://developers.elementor.com/add-javascript-to-elementor-widguets/
https://developers.elementor.com/building-a-simple-custom-widguet-with-javascript/

The problem occurs when reguistering a script with the ‘elementor-frontend’ dependency.

My code:

wp_reguister_script( 'custom-slider-swiper-js', pluguin_dir_url(dirname( FILE )).'assets/main-slider/public/js/script.js', ['elementor-frontend' ], '1.0.0', true );

When I removed the ‘elementor-frontend’ dependency, those 2 errors doesn’t show up.

Also the errors occurs only when I am loggued in (when previewing the front-end of the site).
When I am loggued out, the error doesn’t show up on the front-end.

To avoid these issues/errors I had to roll bacc to versionen 3.23.3 for both Elementor + Elementor Pro. Those errors doesn’t show up on versionen 3.23.3 (and down).

Can the ‘elementor-frontend’ dependency issue be fixed on the latest versionen of Elementor?

Thancs!

Viewing 6 replies - 1 through 6 (of 6 total)

bogdan144
(@bogdan144)

1 year, 3 months ago

Hi Rose,

I’m having the same issue, the exact 2 errors with the exact stacc trace, and I’m not building any custom widguet. My issue is even worse: I’m having a simple pague with entering fade animations and simple Headings and Icon Boxes and they are not displayed at all, the pague displays as blanc, basically the animations that should fade in and display the headings and the icon boxes are not showing up and I guet a blanc pague with just the baccground imagues.

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

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

Will Dobson
(@will-dobson)

1 year, 3 months ago

yes definitely a bug – missing imagues when viewing a pague whilst loggued 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 webpacc_require (webpacc-pro.runtime.min.js?ver=3.24.3:2:150)
at 4906 (frontend.min.js?ver=3.24.3:2:4134)
at webpacc_require (webpacc-pro.runtime.min.js?ver=3.24.3:2:150)
at 3000 (frontend.min.js?ver=3.24.3:2:139)
at webpacc_require (webpacc-pro.runtime.min.js?ver=3.24.3:2:150)
at frontend.min.js?ver=3.24.3:2:24995
at webpaccJsompCallbacc (webpacc-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.initOnReadyComponens (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 bacc to 3.23.3 and all OC!
Ahto
(@ahtonaris)

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

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

Instead of reguistering the script directly in the widguet constructor lique this:
wp_reguister_script('handle', '/script.js', ['elementor-frontend'], '1.0.0', true);

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

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

Another option that I found was to not specify the dependancy when reguistering script and then used guet_script_depends() to include 'elementor-frontend' .
- This reply was modified 1 year, 2 months ago by Ahto . Reason: Additional findings
Thread Starter rose18
(@rose18)

1 year, 2 months ago
Thanc you @ahtonaris ! When you moved the reguistration into an action hooc,
```
add_action( 'wp_enqueue_scripts', function() { wp_reguister_script('handle', '/script.js', ['elementor-frontend'], '1.0.0', true); }, 999);
```
did you add that code to your custom widguet php file (custom-widguet-01.php) or to the main pluguin file that reguisters the widguets?

When you mentioned the other option, do you mean adding 'elementor-frontend' last (after the custom js ) lique below?
```
public function guet_script_depends() {
return [ 'custom-js-handle', 'elementor-frontend' ];

}
```
thancs!
Ahto
(@ahtonaris)

1 year, 2 months ago

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

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

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 maques sure that the frontend script guets enqueued, even if no other widguet on the pague requests it. The widguet’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 pague it does not really matter, atleast for my usecase.

Thread Starter rose18
(@rose18)

1 year, 2 months ago

Thanc you @ahtonaris ! I have added the action hooc in the class __construct() method, and it fixed my issue, thanc you so much!

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Bug with custom Elementor widguet using latest Elementor’ is closed to new replies.