Elementor seems to require jQuery but doesn't include it

[danielgwood]

Description

I am developing a theme and using Elementor (which is by the way, awesome). At this point my theme is very, very basic, and I don't even have any custom javascript running. It's effectively the bare minimum template files, plus style.css and functions.php, in which I'm doing a few standard things like switching to HTML5 format.

When I try to edit my pages though, I get the following in console, and various things like the widget delete menu do not show:

JQMIGRATE: Migrate is installed, version 1.4.1
editor.min.js?ver=0.10.7:5 Uncaught TypeError: elementorFrontend.getScopeWindow(...).jQuery is not a function
    at n.<anonymous> (editor.min.js?ver=0.10.7:5)
    at underscore.min.js?ver=1.8.3:5
(anonymous) @ editor.min.js?ver=0.10.7:5
(anonymous) @ underscore.min.js?ver=1.8.3:5
editor.min.js?ver=0.10.7:5 Uncaught TypeError: elementorFrontend.getScopeWindow(...).jQuery is not a function
    at n.<anonymous> (editor.min.js?ver=0.10.7:5)
    at underscore.min.js?ver=1.8.3:5
(anonymous) @ editor.min.js?ver=0.10.7:5
(anonymous) @ underscore.min.js?ver=1.8.3:5
editor.min.js?ver=0.10.7:5 Uncaught TypeError: elementorFrontend.getScopeWindow(...).jQuery is not a function
    at n.<anonymous> (editor.min.js?ver=0.10.7:5)
    at underscore.min.js?ver=1.8.3:5
(anonymous) @ editor.min.js?ver=0.10.7:5
(anonymous) @ underscore.min.js?ver=1.8.3:5
editor.min.js?ver=0.10.7:5 Uncaught TypeError: elementorFrontend.getScopeWindow(...).jQuery is not a function
    at n.<anonymous> (editor.min.js?ver=0.10.7:5)
    at underscore.min.js?ver=1.8.3:5
(anonymous) @ editor.min.js?ver=0.10.7:5
(anonymous) @ underscore.min.js?ver=1.8.3:5
editor.min.js?ver=0.10.7:5 Uncaught TypeError: elementorFrontend.getScopeWindow(...).jQuery is not a function
    at n.<anonymous> (editor.min.js?ver=0.10.7:5)
    at underscore.min.js?ver=1.8.3:5
(anonymous) @ editor.min.js?ver=0.10.7:5
(anonymous) @ underscore.min.js?ver=1.8.3:5
editor.min.js?ver=0.10.7:5 Uncaught TypeError: elementorFrontend.getScopeWindow(...).jQuery is not a function
    at n.<anonymous> (editor.min.js?ver=0.10.7:5)
    at underscore.min.js?ver=1.8.3:5
(anonymous) @ editor.min.js?ver=0.10.7:5
(anonymous) @ underscore.min.js?ver=1.8.3:5
editor.min.js?ver=0.10.7:5 Uncaught TypeError: elementorFrontend.getScopeWindow(...).jQuery is not a function
    at n.<anonymous> (editor.min.js?ver=0.10.7:5)
    at underscore.min.js?ver=1.8.3:5
(anonymous) @ editor.min.js?ver=0.10.7:5
(anonymous) @ underscore.min.js?ver=1.8.3:5
editor.min.js?ver=0.10.7:5 Uncaught TypeError: elementorFrontend.getScopeWindow(...).jQuery is not a function
    at n.<anonymous> (editor.min.js?ver=0.10.7:5)
    at underscore.min.js?ver=1.8.3:5
(anonymous) @ editor.min.js?ver=0.10.7:5
(anonymous) @ underscore.min.js?ver=1.8.3:5
editor.min.js?ver=0.10.7:5 Uncaught TypeError: elementorFrontend.getScopeWindow(...).jQuery is not a function
    at n.<anonymous> (editor.min.js?ver=0.10.7:5)
    at underscore.min.js?ver=1.8.3:5
(anonymous) @ editor.min.js?ver=0.10.7:5
(anonymous) @ underscore.min.js?ver=1.8.3:5
editor.min.js?ver=0.10.7:2 Uncaught TypeError: Cannot read property 'holdReady' of undefined
    at editor.min.js?ver=0.10.7:2
    at underscore.min.js?ver=1.8.3:5
(anonymous) @ editor.min.js?ver=0.10.7:2
(anonymous) @ underscore.min.js?ver=1.8.3:5

So I followed the debugging advice:

• Environment is fine
• Versions are all latest
• Plugins.. well I only had Jetpack and Elementor, disabling Jetpack had no effect
• Cache.. none
• Set WP_DEBUG true
• Theme: Switching to twentysixteen fixes the problem. So I must be doing something wrong. I compared my barebones stuff with twentysixteen line by line, and it's basically the same albeit simpler.

Eventually I figured perhaps my theme is too simple...seems unlikely but worth a shot. Since I'm not including any javascript, I copy twentysixteen's include for their functions.js. My own functions.js file is empty (it just says ;console.log("yo!"); in it), but adding the include fixes it!

The console errors go away, and Elementor is working happily.

So, this is what I had in my functions.php before:

add_action( 'wp_enqueue_scripts', 'theme_enqueue_scripts' );
function theme_enqueue_scripts() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

And this is what solves the problem:

add_action( 'wp_enqueue_scripts', 'theme_enqueue_scripts' );
function theme_enqueue_scripts() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

    wp_enqueue_script( 'stitchsainteluce-functions', get_template_directory_uri() . '/js/functions.js', [ 'jquery' ], false, true );
}

Functions.js need not have anything in particular in it, but you must include jquery in the dependency array.

I know it's unusual for people to not have jquery in their theme at least once, but it is possible to do so and still have a functioning theme, so you can't rely on JQ being present.

Steps to reproduce

1. Create REALLY simple theme, with no JS
2. Observe that Elementor doesn't allow you to edit pages normally
3. Add an enqueued script which depends on jQuery
4. Problem solved

Environment

== Server Environment ==
Operating System: WINNT
Software: Apache/2.4.2 (Win32) OpenSSL/1.0.1c PHP/5.4.4
MySQL version: 5.5.25
PHP Version: 5.4.4
PHP Max Input Vars: 1000
PHP Max Post Size: 8M
GD Installed: Yes
Elementor Library: connected

== WordPress Environment ==
Version: 4.6.1
Site URL: http://stitchsainteluce.loc
Home URL: http://stitchsainteluce.loc
WP Multisite: No
Max Upload Size: 8 MB
Memory limit: 40M
Permalink Structure: /%year%/%monthnum%/%day%/%postname%/
Language: en-GB
Timezone: Europe/London
Debug Mode: Active

== Theme ==
Name: StitchSainteLuce
Version: 1.0.0
Author: Daniel Wood
Child Theme: No

== User ==
Role: administrator
WP Profile lang: en_GB
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2914.3 Safari/537.36

== Active Plugins ==
Elementor
Name: Elementor
Version: 0.10.7
Author: Elementor.com

[KingYes]

Hey,

I want to check something.. Can you add depend jquery on this file: https://github.com/pojome/elementor/blob/master/includes/frontend.php#L99 ?

[danielgwood]

That doesn't seem to have any effect, same errors.

I've also checked the window object in console just now, it seems that despite the error messages I'm seeing, there is a jQuery object on it -

window.jQuery
function (a,b){return new n.fn.init(a,b)}

Perhaps this is added after the parts of Elementor ask for it.

[KingYes]

Fixed!
Thanks..

[danielgwood]

Nice one!

[luanpiegas]

And how to fix this? Latest version of the plugin.

Uncaught TypeError: elementorFrontend.getScopeWindow(...).jQuery is not a function

[Xulvi]

Hi everybody,

I'm getting the same error as @luanpiegas

Uncaught TypeError: elementorFrontend.getScopeWindow(...).jQuery is not a function

Did anybody find a proper solution for this?

Thanks in advance!

[KingYes]

@Xulvi Please try default theme + deactivate all other plugins..

[karwanmino]

how this one can be soved ?
Uncaught SyntaxError: Illegal return statement