JavaScript is awesome… until it throws errors you’ve never heard of! One of the most common and sneaky ones is the infamous:
“Uncaught ReferenceError: $ is not defined”
Or maybe:
“Uncaught ReferenceError: myFunction is not defined”
This usually happens when things are out of order or missing in your code. Don’t worry — it’s not as scary as it sounds. Let’s fix it with some quick and simple steps!
What’s Really Going On?
This error tells you that your JavaScript code is trying to use something before it’s ready. Maybe a library hasn’t loaded yet. Maybe your code is running before the page is ready.
Here’s how to fix it!
Step 1: Check Your Script Order
If you’re using jQuery (which many do), make sure you’re loading jQuery before your custom script.
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="custom.js"></script>
Simple! But forget this order, and boom — “$ is not defined”.
Step 2: Wait for the Page to Load
You might be running JS before the HTML is even ready. Let’s make sure everything is loaded first.
The jQuery way:
$(document).ready(function() {
// your code here
});
Or using vanilla JS:
document.addEventListener("DOMContentLoaded", function() {
// your code here
});
These lines make sure your code doesn’t run until the DOM is ready. No more surprises!
Step 3: Look for Typos
Don’t laugh — it happens to all of us. JS is case-sensitive. So myfunction is not the same as myFunction.
Also make sure you didn’t forget to include your script tag, or point it to the wrong file.
Double-check these:
- File name spelling
- Correct file path (“js/script.js” vs “/script.js”)
- Correct variable and function names
Step 4: Use Type=”module” Carefully
Sometimes your script tag might look like this:
<script type="module" src="main.js"></script>
If you’re using modules, make sure function scopes are correct. Functions and variables won’t leak into global scope automatically. You need to import or properly export from other files.
This is advanced stuff, so don’t worry if you’re new — just remove type="module" for now, unless you’re intentionally using it.
Step 5: Console Is Your BFF
Open your browser’s developer tools and check the Console tab.
It will tell you exactly which line is causing the issue. This helps you see if:
- You’re calling a function too early
- A script failed to load
- You mistyped something
Step 6: Wrap It All Up
A good way to avoid all “not defined” errors is to wrap your code like this:
window.addEventListener("DOMContentLoaded", function() {
// All your JS here
});
Or if you’re using jQuery (still popular!):
$(function() {
// Safe and ready to go!
});
This keeps your code safe and ensures everything’s loaded before it runs.
Bonus Tip!
If using external scripts, double-check they are actually loading. Use your console or Network tab to confirm.
Pro tip: use async and defer wisely.
<script src="myscript.js" defer></script>
Defer waits until the DOM is ready. Super useful!
So, What Did We Learn?
- Load libraries like jQuery before your code
- Wait until the DOM is ready
- Check for typos and spelling
- Watch out for script loading issues
- The browser console is your detective tool
That’s it! You’re now officially smarter than that error message.
Now get back in there and fix those bugs like a hero 🛠️
