Problem:In various cases, when any piece of code is making use of any jQuery functionality, there are high chances of receiving "Uncaught ReferenceError: $ is not defined" error.
"Uncaught ReferenceError: $ is not defined"
$ represents jQuery function of jQuery. We get this error whenever a call to jQuery method is made before jQuery has been loaded.
Let’s have a look at couple of different syntax that can be interchangeably used.
$("#age").hide() jQuery("#age").hide()
Both of the lines written above hide the field with id= “age” so it is up to an individual to decide which syntax he wants to use.
There are multiple reasons due to which this error can pop up which will be discussed further along with their respective solutions.
[Fixed] Uncaught ReferenceError: $ is not defined
1. Include jQuery script file in the code before including any scripts or files that refer jQuery
We may have multiple script files being called in the code. If we have any such file which has a dependency on jQuery file, then jQuery file should be included before such files as scripts are loaded in the sequence in which they are written in the code.
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js">
</script>
// loads jquery-ui script first
<script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
//loads jquery library after the dependent library jquery-ui
Consider the sequence of scripts above. jquery-ui uses jQuery functionality by using $ shorthand and if the main jQuery script is not loaded by the time jquery-ui script is called then we come across “Uncaught ReferenceError: $ is not defined” error so as the solution, the above sequence should be changed to the one given below.
<script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
// let jQuery be loaded first
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js">
</script>
// load dependent scripts later
Now, jquery-ui file will be able to find $ reference as the jQuery has already been loaded before it is referenced from jquery-ui.
2. Check internet availability
Sometimes the reason for getting this error can be unavailability of internet. When we have jQuery scripts directly being referred from internet like Microsoft or Google CDN and we are offline so the code is not able to access the required URL via internet. This may lead to “Uncaught ReferenceError: $ is not defined” error.
As a solution, we should either ensure internet connectivity when the code is running.
Alternatively, we can also have jQuery file downloaded and placed in the local file system from where the code can access it without the need to connect to the internet.
Below script is being loaded directly from Google CDN. If internet is not available when it is loaded then it will give us the error.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
We can download the above jQuery file from its URL and place it inside our project. We have an example below where it is kept inside lib folder of the project.
<script src="/lib/jquery.min.js"></script>
3. Correct the path from which the jQuery script is loaded
Sometimes this error can occur because the path to jQuery script file does not exist. It can happen because of the two very common reasons.
Firstly, the path which is being referred might not be hosting the jQuery file anymore and we might need to refer to a new path.
Secondly, it can also occur if we have given wrong reference due to some spelling mistake.
In both the cases, the browser will not be able to load the required script which will again lead to "Uncaught ReferenceError: $ is not defined" error.
This can be fixed by correcting the jQuery file’s path in case it is spelt incorrectly or by configuring a new path to load the library in case it has been moved from an existing location to a new location.
This concludes the article on "Uncaught ReferenceError: $ is not defined" error. Please mention in the comments in case you have any questions.