ReferenceError: X Is Not Defined — What It Means and How to Fix It

Uncaught ReferenceError: userName is not defined
ReferenceError: require is not defined
ReferenceError: $ is not defined
ReferenceError: document is not defined

A ReferenceError means JavaScript looked for a name — a variable, function or object — and couldn't find it anywhere it's allowed to look. It's not that the value is empty; the name doesn't exist in that place at all.

That's different from undefined. If a variable exists but has no value, you'll get errors like Cannot read properties of undefined instead.

Cause 1: A typo or wrong capitalisation

JavaScript is case-sensitive. userName, username and UserName are three different names.

const userName = 'Ana'
console.log(username) // ReferenceError: username is not defined

The error message tells you the exact name it couldn't find. Search your file for it.

Cause 2: You forgot to import it

// Using it without importing it
const total = formatPrice(10)

// Fix
import { formatPrice } from './utils'

Also check the export: if utils.js doesn't export the function, importing it won't help.

Cause 3: It's out of scope

Variables declared with let and const only exist inside the { } block where they're declared:

if (loggedIn) {
  const greeting = 'Welcome back'
}
console.log(greeting) // ReferenceError

Declare it in the outer scope if you need it there. (var, let, const)

Cause 4: Used before it's declared

With let and const, using a variable before the line that declares it throws a ReferenceError ("Cannot access 'x' before initialization"). Move the declaration up.

Cause 5: Script load order ($ is not defined)

If you load scripts with <script> tags, a script that uses jQuery's $ must come after jQuery:

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="app.js"></script>

The same applies to any library loaded from a CDN, and to scripts marked async, which can run in any order.

Cause 6: require is not defined

require is Node.js's CommonJS module system. Browsers don't have it, and modern ES modules ("type": "module", or .mjs files) don't either. Use import instead:

import express from 'express'

(ESM vs CommonJS)

Cause 7: window, document or localStorage is not defined

These only exist in the browser. If the code runs on the server — Next.js server rendering, an API route, a Node script — they aren't there. Only touch them inside useEffect, an event handler, or after checking typeof window !== 'undefined'. (window is not defined)

Cause 8: process is not defined

process.env is a Node.js thing. In Vite apps, browser code reads environment variables from import.meta.env.VITE_... instead. (Environment Variables Undefined)

The summary

• ReferenceError = that name doesn't exist where you're using it.
• Check spelling, imports and scope first.
• require, window, document and process errors mean code is running in the wrong environment.

---

EasySpawn runs your app's server and frontend side by side with Claude Code on the same machine, so it can reproduce a ReferenceError, find the missing import and fix it in place. See how it works or join the waitlist.

Related: Is Not a Function Error · How to Read an Error Message · Debugging for Beginners · JavaScript vs TypeScript