Uncaught ReferenceError: jQuery is not defined - FIX

How to FIX – Uncaught ReferenceError: jQuery is not defined on WordPress or any Website

by

jQuery is an important JavaScript library that simplifies event based HTML manipulation on the fly.

So, basically this is an important library that runs almost all WordPress blogs and other websites as well.

In one of my blog I am using the CM downloads manager Pro plugin to deliver file downloads. Basically this plugin hides the download url underneath a download button. It does this by using PHP and JavaScript code.

Once I changed a theme on one of my WordPress site and then suddenly all Download buttons were stopped working.

I mean, when you click on the download button, it just takes you to the top of the page and did not download anything as such.

Let’s look at the actual error and why was the error coming in first place.

jQuery Not Defined Error:

When I checked the developer tools in the browser, I found the below error was coming up:

Because it was a new theme, I looked if the jQuery library is really loaded or not.

When I looked in the source of the file to check, I found that the library is loaded but after the footer, as shown in the below image:

One thing I want to clarify here. Usually the jQuery is loaded in the HEAD tag and that’s the default behavior.

I was using Asset CleanUp plugin to unload unused JavaScripts from irrelevant pages. It is the default behavior of this plugin to load all JavaScript at the end of the html page.

And the hardcoded script that makes use of jQuery, was remained before the footer of the page.

The code is below:

jQuery script before library is actually loaded

Because this script was executing before the actual library script is loaded, I was getting this Uncaught ReferenceError: jQuery is not defined error.

FIX for Uncaught ReferenceError: jQuery

This error may come up because of various factors as written below:

  • jQuery library is not loaded
  • The jQuery script is executed before the library is actually loaded

If jQuery is not Loaded at all:

To know if library is loaded or not you need to check the source of the url. If this is the case, first you need to add some code to load the jQuery library.

Usually this error comes if the jQuery library is not at all loaded by the WordPress theme or other wesbite.

For a WordPress website you can load the jQuery by calling the wp_enqueue_scrips function call:

function load_jquery(){
    wp_enqueue_script('jquery', false, array(), false, false);
}
add_filter( 'wp_enqueue_scripts','load_jquery',1 );

You can add the above code in the function.php on your child theme. Or you can use the Code Snippets plugin to insert this piece of code.

If you have a website other than a WordPress, you can the below code inside your the <head> tag:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

After adding this code, clear any cache that you may have before your server, load the url once again and see if the jquery is loaded.

If loaded, verify if the error still comes or not on the browser Developer console or any respective console.

If jQuery is loaded after the Executing Script:

This was the thing in my case.

Here, jQuery was loaded but at the bottom of the page.

In this case, you need to identify the source of the executing script and need to move it after jQuery is loaded or vice a versa.

As I was using WordPress, and the Asset CleanUp plugin, it was much easier for me. Asset CleanUp plugin has a configuration setting that does this replacement of code automatically.

If you have this plugin, do the following:

  • Go to WordPress Dashboard
  • Go to Asset CleanUp setting (on the left sidebar or Settings > Asset CleanUp)
  • On the plugin settings, go to Optimize JavaScript settings
  • Scroll down and find the Move jQuery Inline Code After jQuery library is called option and enable it.

I recommend you to read and understand what this setting says before you enable it.

Once you made the changes, clear any cache that you may have before your server, load the url once again and see if the script is executed after the jquery is loaded.

The new jQuery code should look something like this:

Executing script is run after jQuery is actually loaded

After this fix, you see the jQuery script is loaded first and the execution script that makes use of this library, is run after that.

Conclusion

It took a lot of time to identify and fix this simple issue. I had to talk to the WordPress Plugin and Theme developer to get it sorted.

Finally I was able to fix this once I get to know the basics of how and where the jQuery scrip it loaded.

So, the jQuery Uncaught ReferenceError is not that huge if looked thoroughly into the code.

Leave a Comment