JavaScript runtime error: $ is undefined

Kris Lachance

Head of Growth

"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.

Invite only

We're building the next generation of data visualization.

Get access