4 Solutions To Uncaught ReferenceError: $ is not defined jQuery Error

1. Overview

In this tutorial, We will be discussing how to solve the famous jQuery error "Uncaught ReferenceError: $ is not defined jQuery Error" that occurs for every developer who started working on jQuery API.

This error comes into existence if you are trying to use a $ variable which is not defined yet using var keyword. In jQuery world, it's a short name of jQuery() function and most commonly used in $(document).ready(function()). When dom is loaded, you are making some stuff using jQuery then there might be chances of corrupting the jQuery library or jQuery file location. This indicates with an error saying "uncaught reference error $ is not defined". This is the most generic error even if you are working on Angular Js, Ajax, Html, and MVC, laravel or rails .. any framework which is related to javascript. Because all of these are built on top of JavaScript.

In my experience, I have seen the junior developers or whose background is java, .Net, C#, Android technologies, and these developers is not having enough knowledge of JavaScript. JavaScript understanding is a must to work on jQuery or any JavaScript framework such as Angular, React or vue.js or ember.js. Once you know the basic concepts of JavaScript, you can troubleshoot any problems easily.

4 Solutions To Uncaught ReferenceError: $ is not defined jQuery Error

Let us start now how to fix this common error.

2. Solution 1: Using before defining - Uncaught ReferenceError: $ is not defined

Case: Invoking the function or using a variable before declaring it.

As you are aware, all javascript code is executed inside the browser such as Chrome, Mozilla, Safari, and IE. So, If you using any variable before declaring or defining, browse will throw this error.

Let us take an example code that throws the error.

value; // ReferenceError: value is not defined
var value;
value; // No more errors here. Becuse value is defined before its usage.

In the first line, the variable value is not defined at this time. So, the browser will show the error. But, once you define and use it, it will not show any errors.

The same logic is applied to the methods as well.

execute(); // ReferenceError: execute is not defined
execute() = function() { // some code }
execute(); // no errors.

3. Solution 2: Loading child scripts before loading parent scripts

For example, for all jQuery application jquery-3.4.1.min.js is the parent file and other jQuery plug-in scripts will be child scripts.

See the below wrong usage that produces Uncaught ReferenceError: $ is not defined jQuery Error.

<script src="http://code.jquery.com/jquery-plugins.js"></script>
<script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>

Here the order of scripts causing the problem. jquery-plugins.js is developed by using a jquery-3.4.1.min.js script. But, we are trying to load the plugins jquery-plugins.js script first then next loading the core jquery-3.4.1.min.js scripts.

To avoid the error, we should load the scripts in proper order as below.

<script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="http://code.jquery.com/jquery-plugins.js"></script>

Another set of correct loading scripts.

<script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"> </script>

Note: All parent scripts must be executed before child scripts execution.

4. Solution 3: Checking Internet Connectivity for Remote Files

Some of the applications do not load the jQuery core files from its own file system. Instead, they use Google CDN or Microsoft CDN files which are stored and distributed in remote locations. Below script file ls loaded from remotely.

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

Now, Trying to do the below jquery operation. If the application accessed from no network area then it will fail to load the jQuery core script and run our code below. So, it cannot '$' the variable and throw the error.

$("#section1").hide()

Now, to fix this problem either we should have the internet or should have the file offline. Download the script and save it to the file system. Finally, use it as below.

<script src="../lib/jquery.min.js"></script>

5. Solution 4: Incorrent Script Location

This is the most common mistake done by the newbies. If you are already using CDN file or local files and later files names were renamed to new. So, the files that are being used now are no more exists. So we need to update the file names to right one.

Another mistake is incorrect file location. If you are not providing the full path or relative path appropriately.

And last but not least, spelling mistakes in the file names.