3 Ways to Solve jQuery - Uncaught ReferenceError: $ is not defined Error

If you are using jQuery, Angular JS, or plain old JavaScript and getting "Uncaught ReferenceError: $ is not defined" error which means $ is either a variable or a method that you are trying to use before declaring it using the var keyword. In jQuery, it's a short name of jQuery() function and most commonly used in $(document).ready(function()). If you are doing some jQuery stuff when DOM is loaded and getting this error it means your browser has a problem loading jQuery library either from the internet or local file system.


In this article, you will see some of the most common reasons for "Uncaught ReferenceError: $ is not defined" errors and how to solve them, but before that let's learn some basics about the dreaded Uncaught ReferenceError: $ is not defined error.

And, If you want to learn Modern JavaScript or level up your skills then I suggest you join these best JavaScript online courses. It's one of the best and hands-on courses to learn ES 6 and other new Javascript features.

One of the common reasons for such error is directly starting with jQuery without knowing JavaScript fundamentals. I have seen many web developers who come from Java, C#, HTML, and Python backgrounds started using jQuery without knowing much about JavaScript.

If you happen to work on the same scenario, I strongly suggest you read at least one of the good JavaScript books for beginners like Head First JavaScript. Always remember that jQuery is a library built on JavaScript, once you know JavaScript, it's much easier to troubleshoot any jQuery error.

Uncaught ReferenceError: X is not defined

Since JavaScript executes inside the browser, your browser like Firefox, Chrome, Edge, or Internet Explorer throws this error when you are using a variable that is not defined, for example, the following code will throw this error, but once you declare the variable using the var keyword, the error will go away:

data; // ReferenceError: data is not defined
var data;
data; // No more errors

Similarly, if you access a method before declaring it you will get this error as shown below:

process(); // ReferenceError : process is not defined
process = function(){};
process(); // No errors

Now that you have learned when does browser throws Uncaught ReferenceError: $ is not defined, it's time to look at some common reasons this error occurs while using jQuery, AngularJS or other JavaScript library which uses $ as a shortcut.

1) One of the most common reason of "ReferenceError: $ is not defined" in jQuery based application is that jQuery plugin is included before jQuery file. Since jQuery plugin uses $, it throw "ReferenceError: $ is not defined" if it doesn't find, which is logical because jQuery was not loaded until then.

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

Solution: Include the jquery.js file before any jQuery plugin files.

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

2) The second most common reason of getting "ReferenceError: $ is not defined" in jQuery is due to the incorrect path, either it's a typo or jQuery file is moved to some other location, the browser is not able to load the jQuery file.

One solution of this problem is simply to fix the path to jQuery library. If you are downloading jQuery from CDN then you can also use Google hosted jQuery file, which is almost always available.


3) Another bizarre but a common reason of "ReferenceError: $ is not defined" in jQuery" is that you might be working offline but loading jQuery from internet. It's one of the silly mistake every web
developer makes it sometime or other. Solution is simple, either connect to internet or use a local copy of jQuery library as shown below:

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

That's all about how to fix the "Uncaught ReferenceError: $ is not defined" in jQuery. You can follow similar approach to any other JavaScript library which is using $ as shortcut. Most of the cases mentioned here also applicable to common libraries like AngularJS and others as well.

Other jQuery and JavaScript tutorials you may like to explore

• Top 5 jQuery Books Every Web Developer Should Read? (see here)
• How to get current URL Parameter using jQuery? (solution)
• How to use multiple jQuery Date picker element in one HTML page? (answer)
• 10 Examples of jQuery selectors for Web Developers (tutorial)
• How to redirect web page using jQuery code? (answer)
• 3 Ways to parse HTML using JSoup in Java? (solution)
• How to reload/refresh a page using jQuery? (answer)
• How to prevent double submission of POST data using JavaScript? (solution)
• How to modify multiple elements in one go in jQuery? (example)
• How to check and uncheck checkboxes using jQuery? (tutorial)

Thanks for reading this article so far. If you like this article then please share with your friends and colleagues. If you have any question or doubt then please drop a comment.