You've just stumbled into one of the most common jQuery pitfalls. The "jquery is not defined" error is a JavaScript ReferenceError that occurs when your script tries to use jQuery functions or methods, but the jQuery library is not properly loaded or initialized.
How did this happen? Probably one of three reasons:
- The jQuery library is not included in the HTML file
- The script using jQuery is executed before the library is loaded
- There's a typo in the jQuery reference (e.g., using lowercase 'jquery' instead of 'jQuery')
Let’s start with the last reason as that’s the easiest to fix.
There's a typo in the jQuery reference
You have a capitalization error, as the correct reference should be jQuery (with a capital 'J') or $.
Here's an example of code that would cause this error:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Error Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>Hello, World!</h1>
<script>
// This will cause the error
jquery('#myElement').hide();
</script>
</body>
</html>
This code will produce the error "uncaught referenceerror jquery is not defined" because the code is using lowercase jquery instead of jQuery or $.
To fix this error, you need to use the correct capitalization for jQuery:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Error Fixed</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>Hello, World!</h1>
<script>
// This will now work correctly
jQuery('#myElement').hide();
// Or you can use the $ shorthand
// $('#myElement').hide();
</script>
</body>
</html>
Remember, it's generally a good practice to use $ instead of jQuery for brevity, unless you're in an environment where $ might conflict with other libraries. Both $ and jQuery are valid ways to reference the jQuery object once the library is properly loaded.
The jQuery library is not included in the HTML file
If you don’t see any lowercase ‘jquery’ instances in your code, check if you forgot to load the jQuery library in the first place.
Look for a <script> tag that loads jQuery. If you don’t see any, load the jQuery library using a <script> tag in the <head> section. This loads jQuery before any of your code runs. A popular and efficient way to include jQuery is by using a Content Delivery Network (CDN).
Here are a few examples of popular CDNs you can use to load jQuery:
Google Hosted Libraries
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
jQuery’s official CDN
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
cdnjs by Cloudflare
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
Make sure you're using a version compatible with your code. In the examples above, we're using 3.6.0, but you should check for the latest stable version or the specific version your project requires.
The script using jQuery is executed before the library is loaded
Last but not least, you may get a “jQuery is not defined” error if you try to use jQuery before it’s loaded.
Here's an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Loading Error Example</title>
</head>
<body>
<h1>Hello, World!</h1>
<script>
// This script runs before jQuery is loaded
jQuery(document).ready(function() {
console.log("Document is ready!");
});
</script>
<!-- jQuery is loaded after the script that uses it -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</body>
</html>
The browser executes scripts in the order they appear in the HTML. When the browser reaches jQuery(), it doesn't know what jQuery is, hence the error.
To fix this, either load jQuery before any scripts that use it or you can use the defer attribute on your script tags.
Here’s how to load jQuery before any scripts that use it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Loading Error Fixed</title>
<!-- Load jQuery first -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>Hello, World!</h1>
<script>
// Now this works because jQuery is already loaded
$(document).ready(function() {
console.log("Document is ready!");
});
</script>
</body>
</html>
And here’s how to use the defer attribute on your script tags:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Loading Error Fixed with defer</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" defer></script>
<script defer>
$(document).ready(function() {
console.log("Document is ready!");
});
</script>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
The defer attribute tells the browser to download the scripts in parallel but execute them only after the HTML document has been fully parsed. This ensures that jQuery is loaded before any code that depends on it runs.
By using these methods, you can efficiently include jQuery in your project and avoid the "jquery is not defined" error while also potentially improving your site's performance.
Track, Analyze and Manage Errors With Rollbar
Managing errors and exceptions in your code is challenging. It can make deploying production code an unnerving experience. Being able to track, analyze, and manage errors in real-time can help you to proceed with more confidence. Rollbar automates error monitoring and triaging, making fixing JavaScript errors easier than ever. Try it today!
