Uncaught ReferenceError: $ is not defined?
Categories:
Uncaught ReferenceError: $ is not defined - Troubleshooting jQuery Issues
Learn to diagnose and resolve the common 'Uncaught ReferenceError: $ is not defined' error in JavaScript, often encountered when jQuery is not loaded correctly.
The 'Uncaught ReferenceError: $ is not defined' error is one of the most frequently encountered issues when working with jQuery in web development. This error indicates that the JavaScript interpreter cannot find a variable or function named $ (which is the common alias for the jQuery object) at the point it's being called. Understanding the root causes and systematic troubleshooting steps is crucial for quickly resolving this problem and ensuring your jQuery-dependent scripts run smoothly.
Understanding the '$' Symbol and jQuery
In JavaScript, the $ symbol is a valid identifier that jQuery uses as a shortcut for its main function. When you include the jQuery library in your web page, it defines a global variable named jQuery and typically assigns it to $ as well. This allows developers to write concise code like $('selector').action() instead of jQuery('selector').action(). The 'ReferenceError' occurs when your script attempts to use $ before the jQuery library has been loaded and initialized.
flowchart TD
A[Browser Loads HTML] --> B{jQuery Script Tag Encountered?}
B -- No --> C[ReferenceError: $ is not defined]
B -- Yes --> D{jQuery Loaded Successfully?}
D -- No --> C
D -- Yes --> E[jQuery Object ($) Available]
E --> F[Your Script Uses $]Flowchart illustrating the jQuery loading process and potential error points.
Common Causes and Solutions
This error almost always boils down to jQuery not being available when your code tries to use it. Here are the most common scenarios and their fixes:
1. jQuery Script Not Loaded
The most frequent cause is simply forgetting to include the jQuery library in your HTML, or including it with an incorrect path. Ensure you have a <script> tag pointing to the jQuery library, either locally or from a CDN.
2. Incorrect Script Order
Your custom JavaScript code that uses $ must be placed after the jQuery library script tag in your HTML. If your script runs before jQuery is loaded, $ will be undefined.
3. Multiple jQuery Versions or Conflicts
Sometimes, multiple versions of jQuery are loaded, or another library uses $ causing a conflict. jQuery's noConflict() method can help resolve this by relinquishing control of the $ variable.
4. DOM Not Ready
While less common for a direct 'ReferenceError', if your script tries to manipulate DOM elements using jQuery before the DOM is fully loaded, it can lead to unexpected behavior. Always wrap your jQuery code in $(document).ready() or $(function() { ... });.
5. Ad Blocker or Network Issues
Occasionally, ad blockers or network connectivity issues can prevent CDN-hosted jQuery files from loading. Check your network tab in developer tools for failed requests.
Practical Solutions and Code Examples
Let's look at how to implement the solutions for the common causes.
1. Ensure jQuery is Loaded First
The jQuery script tag must appear before any script that attempts to use the $ or jQuery object. It's generally recommended to place script tags at the end of the <body> for performance, but jQuery must precede its dependents.
<!-- Correct Order: jQuery loaded first -->
<!DOCTYPE html>
<html>
<head>
<title>Correct jQuery Load</title>
</head>
<body>
<h1>Hello jQuery!</h1>
<!-- Load jQuery from a CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- Your custom script that uses jQuery -->
<script>
$(document).ready(function() {
$('h1').css('color', 'blue');
console.log('jQuery is loaded and working!');
});
</script>
</body>
</html>
Example of correctly loading jQuery from a CDN before custom scripts.
<!-- Incorrect Order: Custom script before jQuery -->
<!DOCTYPE html>
<html>
<head>
<title>Incorrect jQuery Load</title>
</head>
<body>
<h1>Hello jQuery!</h1>
<!-- Your custom script that uses jQuery (will cause error) -->
<script>
$(document).ready(function() {
$('h1').css('color', 'red'); // This line will throw 'ReferenceError: $ is not defined'
console.log('jQuery is loaded and working!');
});
</script>
<!-- jQuery loaded AFTER your script -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</body>
</html>
Example of incorrect jQuery loading order, leading to 'ReferenceError'.
2. Using jQuery.noConflict()
If you're using multiple JavaScript libraries that both use the $ symbol (e.g., Prototype.js), you can use jQuery.noConflict() to release the $ variable and use jQuery instead. This is also useful if you need to load multiple versions of jQuery.
<!-- Load jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- Load another library that uses $ (e.g., Prototype.js) -->
<script src="path/to/prototype.js"></script>
<script>
// Release $ to other libraries, use 'jq' for jQuery
var jq = jQuery.noConflict();
jq(document).ready(function() {
jq('h1').css('color', 'green');
console.log('jQuery (as jq) is working!');
});
// Now, if Prototype.js is loaded, you can use its $ here
// $('some_id').hide(); // This would use Prototype's $ if it's loaded
</script>
Using jQuery.noConflict() to avoid conflicts with other libraries.
3. Always Wrap Your Code in $(document).ready()
While not a direct fix for 'ReferenceError: $ is not defined', it's a best practice that ensures your jQuery code only runs once the DOM is fully loaded. This prevents issues where your script tries to select elements that don't yet exist in the DOM.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
// Shorthand for $(document).ready(function() { ... });
$(function() {
// Your jQuery code here
$('p').text('The DOM is ready!');
});
</script>
Wrapping jQuery code in $(document).ready() for safe execution.