Widgets doesn’t render properly due to a JS Error

The widgets created via Elementor doesn’t display or render properly due to a JS error from your plugin.

Error:

TypeError: o.imagesLoaded is not a function from sina-widgets.min.js:2:2642

Steps to Reproduce this issue:

I have identified this issue while I was fixing the same issue for a client. Sorry, I can’t share the site details. But, I will share some details to replicate the issue. The issue can cause if jQuery is loaded in the footer and gets enqueued after the ‘imagesLoaded’ script from your plugin.

Reproducing this issue is very tricky. But, the issue can occur in multiple environments. I have reproduced the same in my local system by deactivating other plugins except your plugin and of course Elementor. Then add the ‘Sina Blog Post’ widget in a page, then after that any widget that has some JS interactivity (for example Image Carousel). Then accessing the site without logging into the site (important). jQuery can be dequeued and enqueued after your scripts registration if you can’t still reproduce this issue.

Suggestion/Fix:

Temporarily I have fixed the error in the client’s site by enqueuing the jQuery script from the head instead of footer. Since this issue can occur to other users also, I am suggesting an appropriate fix.

The error can be easily fixed in your plugin by adding ‘jquery’ as a dependency for the ‘imagesLoaded’ script. Since you are using imagesLoaded as a jQuery Plugin instead of using vanilla JS in your scripts, I think adding ‘jquery’ as a dependency will be the right choice.

Adding this:

wp_register_script( 'imagesLoaded', SINA_EXT_URL .'assets/js/imagesloaded.pkgd.min.js', ['jquery'], SINA_EXT_VERSION, true );

instead of this:

wp_register_script( 'imagesLoaded', SINA_EXT_URL .'assets/js/imagesloaded.pkgd.min.js', [], SINA_EXT_VERSION, true );

Best Regards
Anantajit JG