elementorModules is not defined

(@rnproject)

I added the following code to functions.php to defer all JavaScript except for /wp-content/plugins/elementor/assets/js/frontend.min.js, and it worked fine.

if (!(is_admin() )) {
    function my_defer_js( $tag, $handle, $src ) {
        if ( FALSE === str_contains( $src, '.js' ) ) return $tag;
        if ( str_contains( $src, 'js/frontend.min.js' ) ) return $tag;
        $tag = '<script src="' . esc_url( $src ) . '" defer charset="UTF-8" id="' . esc_attr( $handle ) . '-js"></script>';
        return $tag;
    }
    add_filter( 'script_loader_tag', 'my_defer_js', 10, 3 );
}

However, after updating Elementor to 4.3.0 or later, the following error started appearing in the console:

frontend.min.js?ver=4.3.4:1 Uncaught ReferenceError: elementorModules is not defined
    at frontend.min.js?ver=4.3.4:1:20490
    at frontend.min.js?ver=4.3.4:1:151
    at frontend.min.js?ver=4.3.4:1:21651
    at frontend.min.js?ver=4.3.4:1:151
    at frontend.min.js?ver=4.3.4:1:55071
    at frontend.min.js?ver=4.3.4:1:151
    at frontend.min.js?ver=4.3.4:1:60015
    at frontend.min.js?ver=4.3.4:1:60019

This revealed the following issues:

elementor-background-slideshow and elementor-widget-image-carousel do not work
The e-n-tab-title tabs do not switch
When attempting to open the Elementor editor, the message “The preview could not be loaded” appears and the editor cannot be opened.

Investigation revealed that the following two additional files must be excluded to prevent them from being deferred:

/wp-includes/js/jquery/jquery.min.js
/wp-content/plugins/elementor/assets/js/frontend-modules.min.js

Dependencies may have changed in Elementor version 4.3.0 and later.

For your reference.

Viewing 1 replies (of 1 total)

Plugin Support Enrique
(@eenrique)

1 day, 22 hours ago

Hi,

I hope you’re doing well and having a fantastic day. I am Enrique Arróniz from the Customer Experience Experts Team.

Thank you for providing such detailed information and the specific code snippet. It made tracking down the root cause much more efficient.

I analyzed the behavior you reported after the Elementor 4.3.0 update, and I found exactly why the interactive widgets (like tabs and carousels) and the editor preview are breaking.

The issue stems from how browsers handle the defer attribute. When your custom code adds defer to a file, it tells the browser to wait until the entire page is loaded before executing it. However, because you excluded frontend.min.js, that specific file is executed immediately.

In Elementor 4.3.0, they restructured their codebase for better performance. Now, frontend.min.js relies heavily on frontend-modules.min.js and jQuery. Because your code deferred those dependencies but not frontend.min.js, the browser tries to run Elementor before it has the tools it needs, resulting in the elementorModules is not defined crash.

As you rightly discovered, excluding those two additional files restores the correct loading order. To apply a permanent and stable fix, you have two options:

Update the snippet: You can update your functions.php file with the modified code that explicitly excludes jquery.min.js and frontend-modules.min.js. (We cannot provide example code or make custom code for you, as it falls out of our support scope.)

Switch to an optimization plugin (Recommended): I highly recommend removing this custom snippet entirely and using a dedicated performance plugin. These plugins are smart enough to read WordPress’s internal code structure and will defer scripts safely without you having to manually update your code every time Elementor releases an update.

Please let me know which route you would like to take.

I’m here to help, so please don’t hesitate to reach out if you have further comments or questions on this. I want to make sure you have everything you need to move forward successfully.

I’ll stay tuned for your update!

Kind regards,

Enrique

Viewing 1 replies (of 1 total)

You must be logged in to reply to this topic.