Quick Solutions To Uncaught ReferenceError: $ is not defined jQuery Error. Understanding reasons and applicable common solutions to any javascript frameworks.
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.
More on JQuery
This error comes into existence if you are trying to use a $ variable that is not defined yet using the 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 that 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.
Let us start now on 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 use 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 applications, 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 is 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 load 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 their own file system. Instead, they use Google CDN or Microsoft CDN files which are stored and distributed in remote locations. The below script file is loaded 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 is 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: Incorrect 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 the 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.
6. Conclusion
In this article, We've seen all possible error scenarios and solutions to Uncaught ReferenceError: $ is not defined jQuery Error.
Ref 1
Ref 2
COMMENTS