One of the most common JavaScript errors we see affecting our customers is . This can be a pretty serious problem if your web app relies on jQuery ( ), since if jQuery fails to load, it can make your JavaScript code unusable. jQuery is not defined 73% of all sites! What are the common causes of jQuery is not defined? The most obvious cause of this error is that you forgot to include jQuery before you used it, but there are also more subtle causes that you’ll not see until you deploy your site to production. 1. Your CDN-hosted jQuery might be blocked If you are using a version of jQuery such as , these CDNs might be blocked by a filter or proxy service on your customers’ connection. We typically see this issue with requests originating from Chinese or Indonesian IP addresses. CDN-hosted Google’s Hosted Libraries 2. Your CDN-hosted jQuery is down or timing out Another common example of this bug is when the CDN hosting your jQuery script is unreliable or slow to load. Browsers typically have a timeout of around 20-30 seconds for each script tag. How can I fix a jQuery is not defined error? Luckily there is a simple solution to most of these issues. You can easily provide a locally-hosted fallback version of jQuery as follows: // First try loading jQuery from Google's CDN 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
// Fall back to a local copy of jQuery if the CDN fails
<script>
window.jQuery || document.write('<script src="http://mysite.com/jquery.min.js"></script>'))
</script> If you have a Rails app, you can alternatively use the , which automates this fallback process for you. jquery-rails gem This technique is used on many popular sites, including , and solves most . If the CDN jQuery fails load, it will almost certainly load fine from your own domain, but you’ll also see the benefits of using a CDN-hosted jQuery for most of your users. jquery.com jQuery is not defined errors Another option is to or another package manager and bundle it with the rest of your JavaScript. To do this, first run and then install jQuery using npm npm install jquery --save import $ from 'jquery'. Is jQuery a problem on my site? It is practically impossible to protect against every JavaScript issue when developing your application, since variables such as browser, operating system, country, and ISP can greatly differ in production. You can check if this is a problem on your site by using a JavaScript error monitoring service like . Bugsnag provides comprehensive which detects this and all other JavaScript errors. Bugsnag JavaScript error reporting

bugsnag

Google

Taking a Deeper Dive into Tmux and Vim

Can We Make Sense of Android Crash Logs? Let’s Find Out

Visit Us

Too Long; Didn't Read

Make resilience your competitive advantage

jQuery is Not Defined: How to Fix This Common Error

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

A Little Dropbox, Bugsnag, and a Lot of Visibility During Error Investigation

51 Stories To Learn About Bugs

A Little Dropbox, Bugsnag, and a Lot of Visibility During Error Investigation

A Quick Guide on Best Practices for JavaScript Error Monitoring

"Alerts need to be useful"

A Little Dropbox, Bugsnag, and a Lot of Visibility During Error Investigation

51 Stories To Learn About Bugs

A Little Dropbox, Bugsnag, and a Lot of Visibility During Error Investigation

A Quick Guide on Best Practices for JavaScript Error Monitoring

"Alerts need to be useful"

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps