ReferenceError: window is not defined — at MyComponent (app/page.tsx:14:12)
appears when:First load of the deployed URL renders an empty body; dev and preview work.
White screen after Vercel deploy
The build is green, the deploy finished, the URL returns an empty <body>. The real error is in the Vercel function log and the browser console — and the fix is almost always add 'use client', add the env var, or stop calling window during SSR.
A white screen after a Vercel deploy means the page rendered empty HTML because the server render threw, or it rendered full HTML but React could not hydrate it. Add 'use client' to components that touch window, guard browser-only code with useEffect, set the missing env var in Vercel, and drop an error.tsx boundary so the next failure shows a fallback instead of a blank page.
Quick fix for white screen after Vercel deploy
01// app/global-error.tsx — last-resort boundary for the root layout02"use client";03 04export default function GlobalError({05 error,06 reset,07}: {08 error: Error & { digest?: string };09 reset: () => void;10}) {11 return (12 <html>13 <body>14 <h1>Something went wrong.</h1>15 <p className="font-mono text-sm">{error.digest}</p>16 <button onClick={() => reset()}>Try again</button>17 </body>18 </html>19 );20}Deeper fixes when the quick fix fails
01 · Add an error boundary so the next failure is not silent
Next.js 16 App Router supports error.tsx at any route level and global-error.tsx at the root. Drop both in so a runtime error shows a fallback instead of a blank page.
01"use client";02 03import { useEffect } from "react";04 05export default function Error({06 error,07 reset,08}: {09 error: Error & { digest?: string };10 reset: () => void;11}) {12 useEffect(() => {13 console.error(error);14 }, [error]);15 16 return (17 <div>18 <h2>Something went wrong.</h2>19 <button onClick={() => reset()}>Try again</button>20 </div>21 );22}02 · Move browser APIs into useEffect
Even inside a client component, code at the top level of the file runs during SSR. Move any window access inside useEffect or gate it with typeof window !== 'undefined'.
01"use client";02 03import { useEffect, useState } from "react";04 05export function SearchBox() {06 const [query, setQuery] = useState("");07 08 useEffect(() => {09 // window access is safe — runs only in the browser after mount10 const q = new URLSearchParams(window.location.search).get("q");11 if (q) setQuery(q);12 }, []);13 14 return <input value={query} onChange={(e) => setQuery(e.target.value)} />;15}03 · Fix hydration mismatches with stable SSR values
Render a stable value on the server, replace it on the client after mount. Dates, random ids, theme state — all need this pattern.
01"use client";02 03import { useEffect, useState } from "react";04 05export function TimeStamp({ iso }: { iso: string }) {06 const [local, setLocal] = useState(iso);07 useEffect(() => setLocal(new Date(iso).toLocaleString()), [iso]);08 return <time dateTime={iso}>{local}</time>;09}Why AI-built apps hit white screen after Vercel deploy
Lovable, Bolt, and v0 were trained on older Next.js that rendered nearly everything on the client. The code they generate frequently uses window, document, localStorage, and third-party libraries that assume a browser environment — without any 'use client' directive. On Next.js 16 App Router, components default to server rendering; the first reference to window during SSR throws ReferenceError: window is not defined, the whole tree fails to render, and the browser receives empty HTML. The user sees a white screen because there is literally nothing in the <body>.
The second pattern is environment-variable drift. AI generators leave process.env.FOO! assertions throughout the code. In local dev the .env file supplies the value. On Vercel, if you forgot to add it, the non-null assertion does not actually enforce anything at build time — the code reaches the value undefined, calls .trim() or .split() on it, throws Cannot read properties of undefined, and the page fails to render.
The third pattern is hydration mismatch. A component renders new Date().toLocaleString() on the server (with the server timezone) and on the client (with the user timezone). React sees the two strings differ, gives up on hydration, and the page blanks out. AI generators emit code like this routinely because the local dev machine and the browser share the same timezone — the bug only surfaces once the app runs on a cloud server in a different region.
white screen after Vercel deploy by AI builder
How often each AI builder ships this error and the pattern that produces it.
| Builder | Frequency | Pattern |
|---|---|---|
| Lovable | High | window / localStorage accessed at the top level of a component without 'use client' |
| Bolt.new | High | Non-null assertion on process.env; StackBlitz preview masks the undefined |
| v0 | Medium | Hydration mismatch from Date.now() in a server-rendered card |
| Cursor | Medium | Migrates Pages Router to App Router incompletely — server/client boundary is wrong |
| Claude Code | Low | Usually adds 'use client' correctly; occasionally ships a raw <script> before React mounts |
Related errors we fix
Stop white screen after Vercel deploy recurring in AI-built apps
- →Enforce 'use client' at the file level — any component with useState, useEffect, or window must have it.
- →Validate process.env with zod at module load so a missing NEXT_PUBLIC_* fails the build.
- →Ship app/error.tsx and app/global-error.tsx — a white screen should never be the user-facing state.
- →Run npm run build && npm start locally before every deploy; it catches what next dev forgives.
- →Add a Playwright smoke that asserts the body has content on every top-level route.
Still stuck with white screen after Vercel deploy?
When the stack trace is cryptic or the white screen is intermittent, a fixed-price engagement ships this week:
- →Production URL is blank right now
- →Stack trace points at minified code you cannot reverse-map
- →Multiple hydration warnings stacking across routes
- →Vercel preview works, production does not
white screen after Vercel deploy questions
Why do I get a white screen after Vercel deploy but the app works locally?+
What does a hydration error look like on the white screen after Vercel deploy?+
How do I know if a missing env var is causing the white screen after Vercel deploy?+
Why would window or document cause a white screen in Next.js production?+
How long does fixing a white screen after Vercel deploy take?+
Ship the fix. Keep the fix.
Emergency Triage restores service in 48 hours. Break the Fix Loop rebuilds CI so this error cannot ship again.
Hyder Shah leads Afterbuild Labs, shipping production rescues for apps built in Lovable, Bolt.new, Cursor, Replit, v0, and Base44. our rescue methodology.
white screen after Vercel deploy experts
If this problem keeps coming back, you probably need ongoing expertise in the underlying stack.