ReferenceError: x is not defined — how to fix

Uncaught ReferenceError: $ is not defined
    at main.js:1:1

Quick fix: Check spelling and scope, import the name (import x from ...), and make sure library scripts load before your code. window/document don't exist in Node; process/__dirname don't exist in browsers or ES modules.

What it means

JavaScript looked up a name through every enclosing scope up to the global one and didn't find it. (If the name exists but its value is undefined, you'd get Cannot read properties of undefined instead.)

Cause 1: typo or wrong case

useState vs usestate, myVar vs myvar. JavaScript names are case-sensitive.

Cause 2: missing import

const [count, setCount] = useState(0);   // ReferenceError: useState is not defined

import { useState } from "react";

Cause 3: script order (`$ is not defined`, `jQuery is not defined`)

Your script runs before the library has loaded:

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

Load the library first. With defer/async on one but not the other, order can also break; use defer on both (deferred scripts run in order).

Cause 4: browser vs Node globals

window, document, localStorage, navigator exist only in the browser. In Next.js/Nuxt server rendering, access them inside useEffect or behind typeof window !== "undefined".
process, require, module, __dirname exist in CommonJS Node, not in the browser. In bundlers use import.meta.env (Vite) for env vars.
In Node ES modules, __dirname is not defined:

import { fileURLToPath } from "node:url";
import { dirname } from "node:path";
const __dirname = dirname(fileURLToPath(import.meta.url));

Cause 5: block scope

if (ok) {
  const message = "hi";
}
console.log(message);   // ReferenceError

Declare the variable in the outer scope. let and const are block-scoped; also, using them before their declaration line throws Cannot access 'x' before initialization.

Cause 6: inline event handlers with modules

Functions in <script type="module"> aren't global, so onclick="doThing()" can't see them. Attach handlers with addEventListener, or assign window.doThing = doThing.

Last updated 2026-10-28.