J
q
u
e
r
y
U
n
c
a
u
g
h
t
R
e
f
e
r
e
n
c
e
E
r
r
o
r
:
$
i
s
n
o
t
d
e
f
i
n
e
d

by Danny

•04 February, 2025

JavaScript is integral to web development, powering the interactive features and dynamic behaviours of websites. A common library used in JavaScript development is jQuery, providing a simpler way to manipulate the DOM, handle events, and make Ajax requests. However, when working with jQuery, developers may encounter an error such as Uncaught ReferenceError: $ is not defined. This article will address the issue and how to resolve it effectively.

Problem

The error Uncaught ReferenceError: $ is not defined occurs when the $ symbol, which is the default shorthand used by jQuery, is not recognised as a valid object. This typically indicates that the jQuery library hasn’t been properly loaded or included before a script tries to use it.

Common Scenarios

jQuery Library Missing
If the jQuery script isn't included or fails to load (e.g., due to a typo in the script source), the $ alias won't be defined.
Improper Script Order
JavaScript files that rely on jQuery are executed before the jQuery library is loaded, leading to the error.
Conflict with Other Libraries
Other JavaScript libraries redefine or override the $ symbol, causing compatibility issues if proper precautions are not taken.

Solution

Below are step-by-step solutions to eliminate this error.

Ensure jQuery is Loaded

The first step is to verify that jQuery is included in your project and correctly loaded before any code that references $. The easiest way to do this is to include jQuery directly via a CDN:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery Test</title>
  <!-- Include jQuery from a CDN -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <script>
    // Ensure $ is defined
    $(document).ready(function () {
      console.log("jQuery is working!");
    });
  </script>
</body>
</html>

Ensure your internet connection is stable, or the jQuery file may fail to load. For offline use, download the jQuery library and include it locally.
Double-check the version in the script URL to match compatibility requirements.

Correct the Script Loading Order

Always place the jQuery <script> tag above any other scripts that depend on it. For example:

<!-- Correct Order -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="custom-script.js"></script>

If your scripts are inside the HTML document, ensure they execute after the DOM is fully loaded. Use the defer or DOMContentLoaded event:

<script>
  document.addEventListener("DOMContentLoaded", function () {
    // Your code that depends on $
    $("#element").text("Loaded correctly!");
  });
</script>

Use the defer attribute for external scripts to load them in the right order while avoiding blocking the page render.
Alternatively, place all scripts at the bottom of the <body> tag.

Resolve Conflicts with Other Libraries

If you're using another library that also uses $, you can stop jQuery from conflicting by using the noConflict() method:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  // Release $ for use by another library
  jQuery.noConflict();

  // Use jQuery instead of $
  jQuery(document).ready(function () {
    jQuery("#element").text("No conflict mode!");
  });
</script>

This solution requires explicitly using jQuery instead of $ throughout your codebase unless you define a new alias.

Further Considerations

Performance Implications
Using CDNs generally improves performance due to file caching across different websites. However, it’s essential to include a fallback in case the CDN fails to load:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> if (typeof jQuery === "undefined") { document.write('<script src="local/jquery-3.6.0.min.js"><\/script>'); } </script>
When to Avoid jQuery
Modern JavaScript (ES6 and beyond) provides native alternatives for most tasks, potentially making jQuery unnecessary. Consider switching to vanilla JS for new projects unless legacy code aligns better with jQuery.
Security Considerations
Always use the latest secure version of jQuery to avoid vulnerabilities. Periodically review dependencies for potential security risks, especially in production environments.

Related Resources

Thanks alot for your feedback!

The insights you share really help me with improving the quality of the content here.

If there's anything you would like to add, please send a message to:

feedback@danny.engineering

J
q
u
e
r
y
U
n
c
a
u
g
h
t
R
e
f
e
r
e
n
c
e
E
r
r
o
r
:
$
i
s
n
o
t
d
e
f
i
n
e
d

Problem

Common Scenarios

Solution

Ensure jQuery is Loaded

Correct the Script Loading Order

Resolve Conflicts with Other Libraries

Further Considerations

Related Resources

Was this resource this helpful?

Related javascript Answers

JqueryUncaughtReferenceError:$isnotdefined

Problem

Common Scenarios

Solution

Ensure jQuery is Loaded

Correct the Script Loading Order

Resolve Conflicts with Other Libraries

Further Considerations

Related Resources

Was this resource this helpful?

Related javascript Answers

J
q
u
e
r
y
U
n
c
a
u
g
h
t
R
e
f
e
r
e
n
c
e
E
r
r
o
r
:
$
i
s
n
o
t
d
e
f
i
n
e
d