"ReferenceError: $ is not defined" is one of the common JavaScript error which comes when you try to use $, which is a shortcut of jQuery() function before you load the jQuery library like calling $(document).ready() function. "ReferenceError: XXX is not defined" is a standard JavaScript error, which comes when you try to access a variable or function before declaring it. Since jQuery is also a JavaScript library, you must first include the declaration of the jquery function or $() before you use it.
In order to understand this error more, let's see how to reproduce "ReferenceError: $ is not defined" in JavaScript with simple examples of "reference error: jquery is not defined"
Here is an example of RefrenceError: not defined in JavaScript for both variable and function:
// accessing variable before declaring it
count; // ReferenceError: count is not defined
var count;
count; // No more errors, because you are accessing it afrer declartion// accessing function without defining it
getCount(); // ReferenceError: getCount is not defined
getCount = function(){};
getCount() // No errorsIt's clear now that "Uncaught ReferenceError: XX is not defined" comes when you try to access XX, which could be a variable or function before defining it.
And, If you want to learn Modern JavaScript or level up your skills then I suggest you join The Complete JavaScript Course: Build Real Project by Jonas Scmedtmann on Udemy. It's one of the best and hand-son course to learn ES 6 and other new Javascript features.
5 Common Reasons ReferenceError: $ is not defined in jQuery
Having said that, let's see some common scenarios or mistakes which cause "Uncaught ReferenceError: $ is not defined" error while using jQuery in your project:
1) Path to your jquery.js file is wrong and it can not be found (Error 404).
This problem can be solved by fixing your path to the jquery.js file. If your project is a public website, you better use Google hosted jQuery file to avoid such issues.
2) jQuery plugin is included before the jQuery file.
You can solve this problem by including jquery.js file before any jQuery plugin files.
3) jQuery UI is included before jQuery min library
You cannot put the script reference to jquery-ui before the jquery script itself. That's what fixed the problem to me: first jquery-x.x.x.min.js, then jquery-ui-xxxxxx.js
4) You are including the jQuery file without the protocol in the URL and accessing the page from your local file system. This is a silly mistake but it happens. To solve this problem just add HTTP protocol (http:// instead of //) in the URL while you are developing.
Sometimes this error also comes "jquery not defined" as shown below:
5) jQuery file is included from the web, but you don't have an internet connection. It is a silly mistake, but you would be surprised how often it happens. You can solve this problem by including local jquery.js file copy or connect to the internet :)
6) Incorrect order of script while loading multiple JavaScript files
If you are loading multiple JavaScript files using the script tag, you must first load jQuery one. corrected it
That's all about the common reasons for ReferenceError: $ is not defined in jQuery. Most likely your problem should be solved by following these tips. If the above cases do not solve your case, try to figure out why jQuery is not loaded before the line where this error is thrown.
Source: Java 67
The Tech Platform