How to Resolve “Uncaught TypeError: e.dispatchEvent is not a function” in Elementor

If you’re using Elementor and come across the error “Uncaught TypeError: e.dispatchEvent is not a function,” this might be causing some elements like menus, accordions, or sliders to stop working correctly. This error is often a JavaScript or jQuery issue. Let’s dive into why this happens and how you can fix it.

What Causes This Error?

The error “Uncaught TypeError: e.dispatchEvent is not a function” usually happens when jQuery, a JavaScript library that Elementor depends on, is not loading properly. This can cause various parts of your website to break, such as menus not opening, accordions not expanding, or sliders not working.

The primary reason for this error is jQuery being loaded multiple times on your site. This might occur due to:

1. Conflicting Plugins or Themes: Some plugins or themes load their own versions of jQuery, which can conflict with the version that WordPress or Elementor uses.
2. External Scripts: Tools like Google Tag Manager (GTM) or other third-party scripts may unintentionally load another version of jQuery.

In my experience, I had the same error because jQuery was loaded twice — one version from WordPress and another from a custom script I added for a SlickSlider shortcode. This caused various elements on my site to break, like menus and accordions.

How to Fix the Error

Here’s a step-by-step guide to help you resolve the issue:

1. Check for Multiple jQuery Loads

• Inspect the Source Code: Right-click on your website, select “View Page Source,” and search for “jQuery.” If you see multiple versions, you have found the problem.
• Use Browser Developer Tools: Open Developer Tools in your browser (F12 in Chrome or Firefox), go to the “Network” tab, refresh the page, and filter by “JS” or “Scripts.” Check if multiple jQuery files are being loaded.

2. Identify and Remove the Conflicting Script

If jQuery is loaded twice, try to identify the source of the conflict:

• Disable Conflicting Plugins or Themes: Temporarily deactivate any recent plugins or switch to a default WordPress theme to see if the error goes away.
• Check Custom Code: If you’ve added any custom scripts (like I did with my SlickSlider shortcode), inspect these scripts to ensure they are not loading jQuery unnecessarily. In my case, the issue was a custom script for SlickSlider that was inadvertently loading its own version of jQuery.

3. Fix the Custom Code

If a custom script is causing the issue, modify it to ensure it doesn’t load a second version of jQuery. For example, with SlickSlider:

function enqueue_slick_slider() {
    // Make sure not to load jQuery again.
    wp_enqueue_script('slick-script', get_template_directory_uri() . '/js/slick.min.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_slick_slider');

Here, the array(‘jquery’) ensures that the SlickSlider script depends on the jQuery already loaded by WordPress, avoiding a double load.

4. Check Google Tag Manager or External Scripts

If you use Google Tag Manager (GTM) or other tools, check if any tags are loading jQuery. Disable or remove those tags if needed.

Conclusion

The “Uncaught TypeError: e.dispatchEvent is not a function” error in Elementor often results from jQuery being loaded twice, which can cause essential elements like menus or accordions to malfunction. By inspecting your site’s source code, identifying conflicting scripts (like the custom SlickSlider script in my case), and ensuring jQuery is loaded correctly, you can fix this issue and restore your site’s functionality.

Bonus

In my case it was the custom short code I created and added jQuery by accident cause the issue, just check if jQuery is loading 1 time or more if it’s more then 1 time remove it.