Fixing ReferenceError: $ is not defined in jQuery - Solution and Tips

"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 errors

It'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:

Fixing ReferenceError: $ is not defined in jQuery - Solution and Tips



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.

Further Reading
The Complete jQuery Course: From Beginner To Advanced!
Up and Running with jQuery
jQuery Fundamentals By Dan Wahlin


Related jQuery tutorials you may like

  • How to get the current URL, Parameters, and Hash using jQuery? (solution)
  • 5 Free Courses to learn jQuery for beginners (free courses)
  • How to use more than one jQuery UI DatePicker in the JSP page? (example)
  • 10 Free Courses to learn JavaScript for beginners (free courses)
  • How to create tab-based UI using jQuery? (example)
  • 10 Free courses to learn Angular for beginners (free courses)
  • How to redirect a page URL using jQuery and JavaScript? (solution)
  • Top 5 Websites to learn JavaScrkpt for FREE (websites)
  • How to write HelloWorld in jQuery? (solution)
  • 5 Books to learn jQuery for Web developers (books)
  • Top 10 Courses to learn JavaScrip tin depth (best courses)
  • How to load jQuery on a web page? (solution)
  • Difference between jQuery document.ready() and JavaScript window.onload event? (answer)
Thanks for reading this article so far. If you find this article useful then please share it with your friends and colleagues. If you have any questions or feedback then please drop a note. 

P. S. - If you want to become a web developer in 2020, you can also see this 2020 Web Developer RoadMap on HackerNoon to find out which frameworks, libraries, tools, and technologies you need to learn to become the Web developer you always wanted to be.

No comments:

Post a Comment