Monday, July 26, 2021

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.

jQuery - Uncaught ReferenceError: $ is not defined Error

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. 

14 comments:

  1. 4th would be handling ajax calls with JS code before jquery is loaded at the bottom of the page

    ReplyDelete
  2. i have this problem for like 2 months and still jquery doesn't work.i referenced jquery3.4.1.min.js in the head of my html file.but while i am trying to load that html it throws: "ReferenceError: $ is not defined"!


    ReplyDelete
  3. Did you try to get more information by carefully removing each script? I mean try to isolate this problem, it may not be the library but the custom JS script.

    ReplyDelete
  4. I have the same problem. I loaded the script in my html file, and it isn't doing anything.

    ReplyDelete
  5. Same problem here. It cannot find the document reference in my js file. Even when adding the jquery script to my html file.

    ReplyDelete
  6. thank you so much brother!!! you have saved my day. :) _/\_

    ReplyDelete
  7. Thank you, I was able to fix the issue with your post!!

    ReplyDelete
  8. Thanks @Ralph, glad you find it useful

    ReplyDelete
  9. This is so stupid
    It is not working

    ReplyDelete
  10. Hey Anonymous, what error you getting and what have you tried so far, may be you can tell bit more about your problem so that we can help you better.

    ReplyDelete
  11. It doesn't work. It should be a problem with browser. But thanks you. Do you know how to convert jQuery files into JavaScript ?

    ReplyDelete
  12. Hello @Unknown, many of jQuery functionalities are now available in JavaScript but I am not ware of any website which can convert jQuery code to JavaScript, seems a good idea, if I come across any, I will update here. Cheers

    ReplyDelete
  13. how to check if successfully import JQuery library? Thanks

    ReplyDelete