jQuery is not defined: Common causes and a simple solution

James Smith in Engineering on February 11th, 2014

One of the most common JavaScript errors we see affecting our customers is jQuery is not defined. This can be a pretty serious problem if your web app relies on jQuery (57.7% of all sites!), since if jQuery fails to load, it can make your JavaScript code unusable.

What are the common causes?

The most obvious cause of this error are 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 CDN-hosted version of jQuery such as Google’s Hosted Libraries, 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.

2. Your CDN-hosted jQuery is down or timing out

Another common example of this bug is when the CDN hosting your jQuery script unreliable or slow to load. Browsers typically have a timeout of around 20-30 seconds for each script tag.

How can I fix this?

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
window.jQuery || document.write('<script src="http://mysite.com/jquery.min.js"><\/script>'))

If you have a rails app, you can alternatively use the jquery-rails gem, which automates this fallback process for you.

This technique is used on many popular sites, including jquery.com, and solves most jQuery is not defined errors. 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.

Is this is 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. Bugsnag provides comprehensive JavaScript error monitoring which detects this and all other JavaScript errors, it is incredibly easy to add to your site and helps you detect and diagnose your errors.

🚀 Bugsnag is hiring! · https://www.bugsnag.com/jobs/