This post will explain the root cause of the Reference Error in your browser’s console log. Also, list most common cases with examples and solutions. Without any further ado, lets see what a reference error is.
This is a common JavaScript error that says: you are trying to access a variable or call a function that has not been defined yet.
Reproducing the error:
// VARIABLES
foo; // ReferenceError: foo is not defined
var foo;
foo; // No more errors
// FUNCTIONS
bar(); // ReferenceError: bar is not defined
bar = function(){};
bar() // No errors
By now, you might have guessed the reason behind the "ReferenceError: $ is not defined" error. It is exactly the same as the bar() example above, but the name of the function is $ instead of bar this time. So, what it means is that we are trying to access the method $ that has not been defined yet. When is it possible? Only when jquery.js file has not been loaded successfully before we tried to call $().
Some common cases when error may occur
-
Problem: Path to your jquery.js file is broken and it can not be found (Error 404).
<script src="/wrong/path-to/jquery.min.js"></script>
Solution: fix your path to jquery.js file. If your project is a public website, you better use Google hosted jQuery file.
<script src="/correct/path-to/jquery.min.js"></script>
-
Problem: jQuery plugin is included before jQuery file.
<script src="/path-to/jquery.plugin.js"></script> <script src="/path-to/jquery.min.js"></script>
Solution: Include jquery.js file before any jQuery plugin files.
<script src="/path-to/jquery.min.js"></script> <script src="/path-to/jquery.plugin.js"></script>
-
Problem: You are including jQuery file without the protocol in the URL and accessing the page from your local file system.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
Solution: Temporarily add HTTP protocol (
http://instead of//) in the URL while you are developing.<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> -
Problem: 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 ofter it happens.
<script src="http://www.example.com/js/jquery.min.js"></script>
Solution: Include local jquery.js file copy or connect to the internet :)
<script src="/js/jquery.min.js"></script>
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.