X is not defined
The code used a name JavaScript can’t find anywhere, usually because of a missing import, a typo, or a Node-only global like process in the browser.
Also appears as
- ReferenceError: Can't find variable: useState
- ReferenceError: React is not defined
Prompt to fix it
My app throws "ReferenceError: useState is not defined" (or another "... is not defined" error). Find every place the missing name is used and fix the cause: add the missing import from the right package or file, fix typos and casing, move declarations out of inner blocks if they are used outside, and in a Vite app replace process.env with import.meta.env and VITE_-prefixed variables. Then run the TypeScript check and fix any other unknown names it reports. Don’t declare a global or a placeholder variable to silence the error.
Paste into Layerwise or any AI coding tool.
What it means
Before it uses a name, JavaScript looks for it in the current function, then in the surrounding code, then among the globals. If it finds nothing, it throws a ReferenceError. In AI-written code the most common reason is a missing import: the code calls useState, useEffect, or a component, but the import line at the top was never added or got dropped during an edit.
Some names exist in one place and not another. process.env exists in Node.js, and a Vite app runs in the browser, so process is not defined there means the code should read import.meta.env.VITE_API_URL. Browser globals like window don’t exist on the server, which gives the same error in reverse.
In a TypeScript project, the type check catches every unknown name before the app runs. Run it, npx tsc -b in a Vite project or npx tsc --noEmit in Next.js, to find all of them at once instead of one crash at a time.
Common causes
- A hook, component, or helper is used without an
import, often after an AI edit moved code between files. - A typo or a case mismatch, such as
usestateforuseStateortodoListforTodoList. - Browser code reads
process.env, which only exists in Node.js. Vite exposes variables onimport.meta.env. - A variable is declared inside a block, such as an
ifor atry, and used outside it. - A file uses JSX without
import React from 'react'in a project that still uses the older JSX setup.
How to fix it
- Click the error to open the file and line, and note the exact name it can’t find.
- Add the missing import at the top of the file, for example
import { useState } from 'react';. - In a Vite app, replace
process.env.API_URLwithimport.meta.env.VITE_API_URL, and rename the variable in.envto start withVITE_. Keep secrets out of these, becauseVITE_values ship to the browser. - If the name is declared in an inner block, move the declaration up so both uses can see it.
- Run the TypeScript check and fix every other unknown name it reports.
Example fix
// The import that was missing.
import { useState } from 'react';
// Vite exposes .env values to the browser only when they start with VITE_.
const apiUrl = import.meta.env.VITE_API_URL;
export function Counter() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(count + 1)}>{count}</button>;
}Related errors
All errorsReferenceError: window is not defined
Code that only works in a browser ran on the server, where there is no window, document, or localStorage.
process is not defined
Browser code used process, a Node.js global that browsers don’t have, usually to read an environment variable the Node.js way.
Module not found: Can't resolve
The bundler followed an import to a file or package that doesn’t exist under that name, so it couldn’t build the page.
supabaseUrl is required
The deployed app created its Supabase client with an empty URL, because the environment variable holding it never made it into the build.
Build with an agent that checks its work
The Layerwise agent clicks through the live preview and reads the console, so it catches errors before you do.