This error means your code tried to use jQuery’s $ function before jQuery was loaded on the page. It’s one of the most common JavaScript errors, especially on sites that rely on third-party CDNs or have complex script loading setups.
The error blocks all jQuery-dependent code from running, potentially breaking your entire application. In modern web development, this often happens when CDNs fail, scripts load out of order, or async loading creates race conditions.
$ is not defined can also be shown as jQuery is not defined depending on your style of usage.
Related Errors
If you’re encountering jQuery loading issues, you might also see these variations:
jQuery is not definedUncaught ReferenceError: $ is not defined$ is not a function(when jQuery loads but something overwrites $)
The Problem
”$ is not defined” is a ReferenceError that occurs when JavaScript tries to use jQuery’s $ variable before the jQuery library has loaded. This is a blocking error that prevents all jQuery-dependent code from executing.
The error typically happens like this:
<!-- jQuery loads from CDN -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js" async></script>
<!-- Your code runs immediately, before jQuery finishes loading -->
<script>
$(document).ready(function() { // Error: $ is not defined
// Your app code here
});
</script>
Key point: Even though the jQuery script tag appears first, network issues, CDN problems, or async loading can cause your code to execute before jQuery is available.
Understanding the Root Cause
”$ is not defined” errors stem from timing and availability issues with the jQuery library:
1. CDN Failures and Network Issues
Most common cause: Third-party CDNs hosting jQuery become unreachable due to network issues, regional blocks, or corporate firewalls.
How to identify: Errors spike during network outages or affect specific user segments (enterprise users, certain regions).
2. Script Loading Order Problems
Scripts execute in the wrong order, especially with async or defer attributes, causing jQuery-dependent code to run first.
How to identify: Errors occur consistently on page load, particularly on slower connections where timing issues are more pronounced.
3. jQuery Loaded Conditionally or Dynamically
Modern bundlers or optimization tools might exclude jQuery from certain bundles or load it conditionally, leaving some code paths without access to $.
How to identify: Errors occur only on specific pages or after certain user interactions.
4. Conflicting Libraries or noConflict Mode
Other libraries using $ or jQuery’s noConflict mode can make the $ variable unavailable even when jQuery is loaded.
How to identify: jQuery exists but $ is undefined or points to a different library.
5. Browser Extensions and Ad Blockers
Some browser extensions block or interfere with jQuery loading, especially from popular CDNs they consider tracking-related.
How to identify: Errors occur sporadically and correlate with users who have ad blockers or privacy extensions.
How to Fix “$ is not defined”
Quick Troubleshooting Checklist
- Verify jQuery loads before any code that uses it
- Check browser DevTools Network tab for failed jQuery requests
- Add a fallback for CDN failures
- Remove async/defer from jQuery script tags if present
- Test with ad blockers and privacy extensions enabled
- Monitor your frontend to catch loading errors in production
- Consider whether you actually need jQuery in 2025
If basic checks don’t resolve the issue, follow these systematic fixes:
Step 1: Implement CDN Fallback
Add a local fallback when CDN-hosted jQuery fails to load:
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
// Check if jQuery loaded from CDN
if (typeof jQuery === 'undefined') {
// Fallback to local copy
document.write('<script src="/js/jquery-3.7.1.min.js"><\/script>');
}
</script>
Step 2: Ensure Proper Script Order
Make sure jQuery loads and completes before your code runs:
Option 1: Use DOMContentLoaded
- Wait for the DOM and all scripts to load before running jQuery code
- Wrap your code in native event listeners that check for jQuery
Option 2: Use Script Load Events
- Attach load event handlers to the jQuery script tag
- Only execute dependent code after jQuery confirms it’s loaded
Option 3: Bundle jQuery with Your Code
- Include jQuery in your build process instead of loading from CDN
- Guarantees availability but increases your bundle size
Step 3: Defensive Coding Practices
Add checks before using jQuery to prevent errors:
Check jQuery Availability
- Test if $ and jQuery exist before using them
- Provide meaningful fallback behavior or retry logic
- Log diagnostic information for debugging production issues
Use jQuery Instead of $
- Reference jQuery directly to avoid conflicts with other libraries
- Pass $ as a parameter to your functions for local scope
Step 4: Modern Alternatives
Consider if you need jQuery at all. Modern JavaScript can handle most jQuery use cases:
DOM Selection: Use document.querySelector() instead of $()
Event Handling: Use addEventListener() instead of .on()
AJAX: Use fetch() instead of $.ajax()
DOM Manipulation: Use native methods like classList, appendChild, etc.
For a 30kb library, jQuery might not provide enough value in 2025 when browsers have caught up with most of its conveniences.
Step 5: Host jQuery Yourself
Eliminate CDN dependency by hosting jQuery on your own servers:
Benefits:
- Complete control over availability
- No third-party network dependencies
- Faster loading for repeat visitors with caching
- No privacy or security concerns with external requests
Trade-offs:
- Lose potential CDN caching across sites
- Increases your bandwidth costs
- You manage version updates
When to Ignore This Error
Generally, “$ is not defined” should not be ignored as it usually breaks functionality. However, consider the context:
- Development builds: Temporary errors during hot module replacement
- Legacy code paths: Old code that’s being phased out
- Third-party widgets: Embedded content that handles its own jQuery loading
Investigate further when you see:
- Consistent patterns: Regular errors from production users
- Critical functionality: Errors affecting core features or conversion paths
- Performance impact: Loading failures causing slow page loads
- User complaints: Support tickets about broken functionality
Summary
”$ is not defined” is fundamentally a script loading problem. jQuery isn’t available when your code expects it, usually due to CDN failures, loading order issues, or network problems. The solution involves ensuring jQuery loads reliably before dependent code runs.
Consider this error an opportunity to evaluate whether you need jQuery at all. Modern JavaScript has evolved to handle most of jQuery’s use cases natively, potentially eliminating this entire class of errors from your application.
For other common JavaScript errors and solutions, check out our JavaScript Answers index.
Remember: Every external dependency is a potential point of failure. Whether you stick with jQuery or migrate away, make sure your critical functionality doesn’t break when third-party resources fail.
