How to Fix a ReferenceError in JavaScript

A JavaScript ReferenceError means execution tried to use a name that cannot be accessed at that point. Read the exact message first: x is not defined usually means the name is undeclared or unavailable in the current scope; Cannot access 'x' before initialization means a let, const, or class binding exists but has not initialized yet. Fix the spelling, scope, initialization order, or dependency loading that caused that specific message.

MDN describes the “is not defined” case as a non-existent variable being referenced. MDN: ReferenceError: “x” is not defined · MDN: lexical declaration accessed before initialization

1. Identify which ReferenceError you have

Start with the complete error text and stack trace. The wording points to different causes, and changing declaration keywords without diagnosing the cause can create a new bug.

Error pattern	What it means	First fix to try
`ReferenceError: x is not defined`	The identifier cannot be resolved in the executing context.	Check spelling and capitalization, then find the declaration or import and confirm it is in scope.
`ReferenceError: Cannot access 'x' before initialization`	A lexical binding is in its temporal dead zone (TDZ); execution reached a read before its initialization.	Ensure initialization happens before the read.
`ReferenceError: x is not defined` on assignment	Code assigned to an undeclared name. Strict mode rejects implicit globals.	Declare the intended local variable. Use `globalThis.x` only if shared global state is deliberate.

2. Follow a reliable debugging sequence

Read the first relevant stack frame. Locate the line where the identifier is read or assigned, then follow the call chain to understand when that code runs.
Verify the exact name. JavaScript identifiers are case-sensitive. Compare the use with the declaration, import, parameter, or property name. A property access such as user.name is different from a bare variable named name.
Find the declaration and check its scope. A name declared inside a function or block is not available outside it. Keep the use in scope, pass the value as a parameter, or return it to the caller.
Check initialization order. For let, const, and class, inspect execution order, not just line order. A later function may safely read a binding if it is called only after initialization.
Check how the value is supplied. If it comes from an import, browser script, test setup, or runtime configuration, confirm that provider loads successfully and before the consumer runs.
Check assignment sites. In strict mode, assigning to an undeclared name throws. Declare a local binding or, when truly intended, explicitly set a property on globalThis.

3. Fix an undeclared or out-of-scope name

Declare a value where it is needed, or move the use into the scope that owns it. Prefer passing data across function boundaries over relying on accidental globals.

function calculate() {
  const total = 2 + 3;
  return total;
}

console.log(total); // ReferenceError: total is not defined

total exists only inside calculate. Consume it inside the function or store the returned value:

function calculate() {
  const total = 2 + 3;
  return total;
}

const result = calculate();
console.log(result); // 5

If the value belongs to a nested block, the same rule applies to let and const:

if (true) {
  const message = "ready";
}

console.log(message); // ReferenceError: message is not defined

Move the read into the block, or declare the binding in the narrowest enclosing scope shared by its intended uses. var is function-scoped rather than block-scoped, but switching to var is not a general fix: it changes behavior and does not solve a misspelling, missing dependency, or incorrect function boundary.

4. Fix access before initialization

A let, const, or class binding cannot be read from the start of its scope until its declaration initializes it. That interval is the temporal dead zone.

console.log(value); // ReferenceError: Cannot access 'value' before initialization
const value = 3;

Move the read after initialization:

const value = 3;
console.log(value); // 3

Execution order matters. A function can refer to a binding declared later if that function is called after the binding initializes:

function printValue() {
  console.log(value);
}

const value = 3;
printValue(); // 3

But calling it earlier still fails. Also, typeof does not bypass the TDZ:

console.log(typeof value); // ReferenceError in the TDZ
const value = 3;

5. Distinguish ReferenceError from undefined

A declared variable without an initializer has the value undefined; a missing identifier can throw ReferenceError.

let declared;
console.log(declared); // undefined

console.log(missing); // ReferenceError: missing is not defined

typeof missing can test an undeclared global identifier without throwing, which is useful for optional globals:

if (typeof optionalLibrary !== "undefined") {
  optionalLibrary.start();
}

This is not a general substitute for finding a missing declaration. It does not fix the program, and typeof on a lexical binding in its TDZ still throws.

6. Check dependencies and browser script order

If a browser script expects a library global, confirm that the library request succeeded and its script executes before the code that uses it. In a page using script elements, put the dependency first and verify the URL and load errors in the browser’s network and console panels. For modules or other runtimes, follow that environment’s import and loading rules rather than assuming a global script variable exists.

<script src="/vendor/library.js"></script>
<script src="/app.js"></script>

If the consumer runs before the provider has loaded, fix the loading sequence or use the runtime’s supported module mechanism. A name that exists in another file is not automatically visible in every scope or runtime.

7. Fix assignment to an undeclared name

Strict mode reports an error for an assignment that would otherwise create an accidental implicit global. Declare the variable with const when it is not reassigned, or let when it is:

"use strict";

let count = 1;
count += 1;
console.log(count); // 2

If global state is genuinely required, make that intent explicit:

globalThis.sharedCount = 1;

Do not disable strict mode to silence the error. That leaves the accidental global behavior in place and can make name collisions harder to find.

8. Troubleshooting common cases

Symptom	Likely cause	Resolution
`x is not defined` after renaming a variable	One use still has the old name or different capitalization.	Search the file and related callers for every use; align the identifier exactly.
Works inside a function, fails outside it	The declaration is function-local.	Return the value, pass it to the caller, or move the consumer into the function.
Works in one branch or block, fails afterward	A `let` or `const` declaration is block-scoped.	Move the consumer into the block or declare the binding in a shared enclosing scope.
`Cannot access before initialization`	Execution reached a lexical binding before initialization.	Move the read or call until after initialization; inspect callbacks and circular module dependencies if relevant to the execution order.
Browser says a library name is not defined	The library failed to load, loaded too late, or is not exposed as a global in that setup.	Check the network request, script order, and the library’s module-loading instructions.
Error occurs on assignment in strict code	The left-hand name has no declaration.	Declare a local variable or explicitly use `globalThis` for intended global state.
`typeof x` still throws	`x` is a lexical binding in its TDZ, rather than simply an absent global.	Initialize it before checking or reading it.
Declared variable logs `undefined`	The binding exists but has no value yet, or the value supplied to it is undefined.	Trace the assignment and initialization path; this is different from an undeclared-name ReferenceError.

9. Make the fix durable

Keep bindings in the narrowest scope that supports their intended use.
Pass values into functions and modules explicitly rather than depending on undeclared globals.
Read the first meaningful stack frame and preserve the exact error message while debugging.
When a dependency provides a name, verify its load and import path at the point the consumer runs.
Do not change let or const to var as a reflex; fix the actual scope or timing issue.

10. Capture a reproducible browser error

For a page-specific error, capture the page and inspect the browser console and network activity around the failing script. A screenshot can preserve the visible page state alongside a report or issue, but it does not replace the JavaScript stack trace or console output.

Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server from ScreenshotNeo. One GET request captures a URL as an image or PDF; the API documentation lists the available parameters and formats.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

ScreenshotNeo API documentation

Cookie and consent banners, newsletter popups, and chat widgets are removed before the shot; each cleanup step can be turned off.
Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed; response headers report the page verdict and billing status.
An MCP server provides take_screenshot, get_page_info, and capture_pdf tools for AI agents and MCP clients.
The free plan includes 1,000 screenshots per month with no card. Paid plans start at $5 for 3,000 screenshots; every feature is on every plan.

Create a free ScreenshotNeo account and get 1,000 screenshots a month with no card.

11. Cost, performance, and reliability notes

Fixing a ReferenceError is a source-code change and does not require buying a tool. For browser-page evidence, consider the cost of running and maintaining your own browser automation separately from screenshot capture. A hosted screenshot API avoids setting up a browser for that capture task; ScreenshotNeo bills only clean shots, while its response headers indicate the page verdict and billing status. No screenshot can diagnose a JavaScript error by itself: retain the console message, stack trace, and relevant network failures.

For reliable reproduction, record the page URL, the exact error text, the reported source location, and whether a required script or module loaded. When capturing a page, allow for slow loads and dynamic content; a screenshot records the rendered state at capture time, so timing and network conditions can affect what appears.

12. FAQ

Why does JavaScript say a variable is not defined?

The identifier is unavailable in the current execution context. Check its spelling, declaration, scope, and whether the code that supplies it has loaded.

Can I fix every ReferenceError by declaring the variable?

No. A declaration will not correct a misspelled name, an out-of-scope access, a read before lexical initialization, or a dependency that did not load.

Why does `var` sometimes avoid this error?

var has different function-scoping and hoisting behavior. Switching to it can change the symptom without fixing the underlying scope or order problem.

Does a screenshot show the ReferenceError?

A screenshot captures rendered pixels. Use the browser console and stack trace to inspect the error; a screenshot can accompany that evidence to show the page state.