The error message “uncaught referenceerror: $ is not defined” is frequently encountered by developers in JavaScript, causing confusion and frustration.
It is essential for creating reliable and bug-free web applications to comprehend the underlying cause of this error and learn effective approaches to resolve it.
For that reason, this article aims to delve into the reasons behind the “$ is not defined” error and offer practical solutions to overcome it.
What is Uncaught Referenceerror: $ is not defined
The error “Uncaught ReferenceError: $ is not defined” typically occurs in JavaScript code. It indicates that the symbol “$” is being used as a variable or function name, but it has not been defined or imported properly.
In JavaScript, the symbol “$” is commonly associated with popular libraries like jQuery.
In fact, many JavaScript libraries use the “$” as a shorthand for accessing their functionality.
However, in order to use these libraries, you need to ensure that they are properly loaded and available in your code.
Common cases referenceerror: $ is not defined occur
Here are the common cases why this error occurs:
📌 The path to your jQuery.js file is incorrect or unavailable, resulting in an Error 404 indicating that the file cannot be found.
<script src="/wrong/path-to/jquery.min.js"></script>
To resolve the issue, you should fix the path to the jQuery.js file in your project.
If your project is a public website, it is recommended to use the Google hosted jQuery file.
This ensures that the file is readily available and accessible for your website visitors.
<script src="/correct/path-to/jquery.min.js"></script>
📌 jQuery plugin is included before jQuery file.
<script src="/path-to/jquery.plugin.js"></script> <script src="/path-to/jquery.min.js"></script>
Ensure that you include the jQuery.js file before any jQuery plugin files in your code.
<script src="/path-to/jquery.min.js"></script>
<script src="/path-to/jquery.plugin.js"></script>📌 You are including jQuery file without the protocol in the URL and accessing the page from your local file system.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
Temporarily add HTTP protocol (http:// instead of //) in the URL while you are developing.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>📌 jQuery file is included from the web, but you don’t have an internet connection. It is a silly mistake, but you would be surprised how ofter it happens.
<script src="http://www.example.com/js/jquery.min.js"></script>
Include local jquery.js file copy or connect to the internet
<script src="/js/jquery.min.js"></script>
How to fix uncaught referenceerror: $ is not defined
So here are the recommended fix you can try in fixing the error.
- Ensure jQuery is included
If you’re using the “$” symbol as a shorthand for jQuery, make sure you have included the jQuery library before using it
You can do this by adding the following script tag in the section of your HTML file:
This will load the jQuery library from a CDN (Content Delivery Network). Adjust the version number if needed.
- Check script loading order
Verify that the script tag referencing jQuery is placed before the script where you’re using the “$” symbol.
The jQuery library needs to be loaded before you can use it.
For example:
- Use a different symbol:
If you suspect a conflict with other libraries or frameworks, you can try using a different symbol instead of “$” for jQuery.
You can achieve this by utilizing the jQuery.noConflict() method.
For example:
- Check for conflicts:
Ensure that there are no other libraries or scripts that are overriding the “$” symbol. Some JavaScript frameworks or libraries may use “$” as well.
In such cases, you can use an IIFE (Immediately Invoked Function Expression) to create a local scope and pass the jQuery object as a parameter.
This way, you can use a different symbol within your code.
Example:
- Verify file paths and dependencies:
Double-check that the paths to the jQuery library and other dependencies are correct.
Ensure that the file names and paths are accurate, and the required scripts are properly included.
Anyway, here are other fixed errors you can refer to when you might encounter them.
Conclusion
In conclusion, the “uncaught referenceerror: $ is not defined” error is a common challenge for JavaScript developers. By understanding its causes and implementing the discussed solutions, you can effectively overcome this error and ensure smooth JavaScript code execution.
Remember to correctly include the jQuery library, manage script loading order, resolve conflicts, and verify variable and function references.
We hope this guide has assisted you in resolving the error effectively.
Until next time! 😊
JavaScript ReferenceError debugging checklist
- Read the error message. It usually names the exact variable that is not defined.
- Check the console for load errors. Failed script or import elsewhere often causes downstream ReferenceError.
- Verify script order. Dependencies must load first. Use
deferattribute or bundler. - Check for typos. JavaScript is case-sensitive —
userNamevsusername. - Use TypeScript. Compile-time catches every ReferenceError.
Common ReferenceError sources
- Missing import statement. Especially with modern module systems.
- Script order wrong. jQuery, React, or other libraries load after the code that uses them.
- Scope issues. let / const declared inside a block, accessed outside.
- Temporal dead zone. Access before declaration in same scope.
- Server-side vs client-side context. Browser globals not available in Node/SSR.
Modern tooling to prevent ReferenceError
- TypeScript with strict mode. All ReferenceErrors caught at compile time.
- ESLint no-undef rule. Warns on undefined identifiers.
- Vite / Webpack module bundler. Handles dependency graph automatically.
- eslint-plugin-import. Warns on unresolvable imports.
- Live testing via Playwright or Cypress. Catches runtime ReferenceErrors before deploy.
Official documentation
Frequently Asked Questions
What is JavaScript ReferenceError and what causes it?
ReferenceError is raised when JavaScript tries to use a variable that doesn’t exist in the current scope. Common causes: typo in variable name, accessing a variable declared with let/const before its declaration (temporal dead zone), assuming Node.js globals exist in the browser (or vice versa), or import path errors in ES modules.
How do I fix ‘window is not defined’ in Next.js or SSR?
Server-side rendering runs your code on the server where ‘window’ (a browser-only global) doesn’t exist. Fix: gate the code with typeof window !== ‘undefined’ OR move it into a useEffect (which only runs client-side). For Next.js, dynamic import with ssr: false also works.
How do I fix ‘fetch is not defined’ in Node.js?
fetch was browser-only until Node 18. Three fixes: (1) Upgrade to Node 18+. (2) Install node-fetch (npm install node-fetch) and import it. (3) Use axios as a cross-platform alternative. For React Native, use the built-in fetch (it’s a browser-like environment).
What is the temporal dead zone in JavaScript?
The period between when a let/const variable is hoisted to the top of its block and when it’s actually declared. Accessing it during this window throws ReferenceError. Example: console.log(x); let x = 5; throws because x hasn’t been declared yet. With var, this would print undefined instead (var is hoisted with undefined value).
Where can I find more ReferenceError fixes?
Browse the ReferenceError reference hub for 34+ specific JavaScript fixes (Node ESM, SSR, React, browser globals). For JavaScript fundamentals see the JavaScript Tutorial hub.
Glay Eliver
Programmer & Technical Writer at PIES IT Solution
Glay Eliver is a programmer and writer at PIES IT Solution, author of over 600 tutorials at itsourcecode.com. Specializes in JavaScript tutorials, Microsoft Office how-tos (Excel, Word, PowerPoint), and Python error debugging covering ImportError, TypeError, AttributeError, ModuleNotFoundError, and JavaScript ReferenceError. Authored several of the site’s highest-traffic Excel and MS Office reference articles.
Expertise: JavaScript · MS Excel · MS Word · MS PowerPoint · Python · Python ImportError · Python TypeError · Python AttributeError · ModuleNotFoundError · JavaScript ReferenceError · Pygame
· View all posts by Glay Eliver →