If you are working on a web project and see the error 'Uncaught ReferenceError: $ is not defined' in your browser console, you are not alone. This is one of the most common JavaScript errors encountered by beginners. It simply means that your code is trying to use jQuery (represented by the $ symbol), but the browser cannot find the jQuery library.
In this guide, we will walk through the exact steps to identify why this is happening and how to fix it in minutes.
Step 1: Verify if jQuery is Included
The most common cause is simply forgetting to link the jQuery library to your HTML file. JavaScript executes top-to-bottom, so if your script tries to use $ before the library is loaded, it will crash.
Check your <head> or the bottom of your <body> tag for a script source. If it is missing, add the following Google CDN link before your own custom script tags:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
Step 2: Check the Loading Order of Scripts
Order matters in web development. If your custom script.js file is placed above the jQuery CDN link, the browser will try to run your code before jQuery exists. Always ensure that the jQuery library is loaded first.
Correct Order:
1. jQuery Library Script
2. Your Custom JavaScript File
Step 3: Fix Broken File Paths
If you are hosting jQuery locally (instead of using a CDN), ensure the src path is correct. If your file is in a folder named 'js', your code should look like this:
<script src="js/jquery.min.js"></script>
Pro Tip: Right-click your webpage, select 'Inspect', go to the 'Network' tab, and refresh. If you see a 404 error next to the jQuery file, your path is incorrect.
Step 4: Resolve CDN Outages or Connectivity Issues
Sometimes, a CDN might be blocked by a firewall or the user might be offline. To prevent your site from breaking, you can use a local fallback. This code attempts to load jQuery from a CDN and, if it fails, loads a local copy:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery.min.js"><\/script>')</script>
Step 5: Handle jQuery 'noConflict' Mode
If you are using other libraries (like MooTools or Prototype) or a specific WordPress setup, the $ sign might be reserved for another library. In this case, jQuery gives up the $ shortcut.
To fix this, you can wrap your code in an Immediately Invoked Function Expression (IIFE) to safely use the dollar sign again:
(function($) {
// Your jQuery code goes here and can safely use $
$(document).ready(function(){ ... });
})(jQuery);
Step 6: Ensure Your Code Runs After the DOM is Ready
If your script is in the <head> without an async or defer attribute, it might execute before the browser has even finished reading the HTML. Wrap your code in a document ready function to ensure the environment is stable:
$(document).ready(function() {
// Your code here
});
💡 Pro Tip: Keep your software updated to avoid these issues in the future.
Category: #Website