JavaScript runtime error: $ is undefined
"JavaScript runtime error: dollar sign is undefined" means your code expects a definition for $ that it isn't finding. This is usually due to problems with the integration of jQuery or other libraries that use $ as a shorthand.
In this post we’ll cover how to address the error.
Understanding the error
The $ is typically synonymous with jQuery, a widely-used JavaScript library. When your JavaScript runtime throws an error saying $ is undefined, it's indicating that it expected to find $ as an alias for jQuery (or another library that uses $), but couldn't. This error surfaces when your code attempts to use $ before it's been defined, often because the library hasn't loaded or isn't included in the project at all.
Check if jQuery is included
The first thing to verify is whether jQuery is properly included in your HTML file. Look for a <script> tag that references jQuery in the <head> or just before the closing </body> tag.
<script src="<https://code.jquery.com/jquery-3.6.0.min.js>"></script>
Ensure this line appears before any scripts that utilize $.
Verify the script loading order
Script execution order is crucial. Your code that depends on $ should come after jQuery has been loaded.
<script src="<https://code.jquery.com/jquery-3.6.0.min.js>"></script> <script src="your-script-using-jquery.js"></script>
Confirm jQuery version compatibility
Make sure that the version of jQuery you're using is compatible with your code. Using deprecated methods with newer versions, or vice versa, can lead to unexpected errors, including $ being undefined if the code fails before it registers $.
Look for no-conflict mode issues
jQuery's no-conflict mode releases control of the $ variable and reassigns it back to any previously loaded library. If jQuery is in no-conflict mode, you'll need to use jQuery instead of $, or assign a new alias:
jQuery.noConflict(); var $j = jQuery;
Now, use $j in place of $.
Check for multiple JavaScript libraries
If you're using multiple libraries, another one may be taking control of the $ variable. If jQuery is included after such libraries, it might not have control over $. Ensure jQuery is included first, or use jQuery's no-conflict mode as described above.
Ensure jQuery is not being overwritten
Another script or inline JavaScript might be overwriting $. Search your codebase for any instances where $ is defined, which can conflict with jQuery's $.
Use document ready
Your code might run before the DOM is fully loaded, making $ undefined. Encapsulate your code within jQuery's document.ready to ensure the DOM is ready:
$(document).ready(function() { // Your code here });
Or, using the shorthand:
$(function() { // Your code here });
Inspect for ad blockers or browser extensions
Sometimes browser extensions, particularly ad blockers, can interfere with script loading. Try running the code in incognito mode or with extensions disabled to rule this out.
Validate content security policy (CSP)
A restrictive CSP can prevent the loading of external scripts like jQuery. Check the console for CSP-related errors and adjust your policy headers to allow jQuery if necessary.
Look at network issues
The browser's network tab can indicate if the jQuery script failed to load due to network issues. A 404 or similar error means that the path to jQuery is incorrect or the server is unreachable.
Review error stack trace and console messages
Examine the error stack trace in your browser's developer console for clues on where the error was thrown. Console messages can provide insight into what part of your code is executing before $ is defined.
Test your code with a local jQuery file
If external factors like network problems seem to cause the error, download jQuery and reference it locally in your project:
<script src="path/to/your/local/jquery.min.js"></script>
This can help determine if the problem is with your local environment or the external jQuery source.
By systematically checking these potential pitfalls, you should be able to diagnose and correct the "JavaScript runtime error: dollar sign is undefined" efficiently.
The next generation of charts and BI.
Coming soon.
Fast. Opinionated. Collaborative. Local-first. Keyboard centric.
Crafted to the last pixel. We're looking for early alpha users.
How to Remove Characters from a String in JavaScript
Jeremy Sarchet
How to Sort Strings in JavaScript
Max Musing
How to Remove Spaces from a String in JavaScript
Jeremy Sarchet
Detecting Prime Numbers in JavaScript
Robert Cooper
How to Parse Boolean Values in JavaScript
Max Musing
How to Remove a Substring from a String in JavaScript
Robert Cooper