Why did my vibe-coded app break?

36 common errors from AI-built apps, each with the cause in plain English and a fix prompt to paste into your AI tool.

Next.jsReact

Hydration failed: server HTML didn't match the client

The first render on the server and the first render in the browser produced different HTML.

Next.jsReact

useState / useEffect only works in a Client Component

In the Next.js App Router, files are Server Components by default. Hooks and event handlers need a Client Component.

Next.jsEnv vars

process.env.NEXT_PUBLIC_... is undefined in the browser

Next.js only exposes env vars to browser code when their name starts with NEXT_PUBLIC_, and it inlines them at build time.

DeployEnv varsVercel

Works locally, broken after deploy: env var missing in production

.env files stay on your machine. Your host only knows the variables you add in its dashboard.

ViteEnv varsReact

import.meta.env.VITE_... is undefined (Vite, Lovable, Bolt)

Vite only exposes variables that start with VITE_ to client code, via import.meta.env, not process.env.

SecurityEnv varsAPI keys

My API secret is in the browser bundle

Anything in client-side code, including NEXT_PUBLIC_ and VITE_ variables, is downloadable by anyone. Treat that key as compromised.

CORSAPI

Blocked by CORS policy: No 'Access-Control-Allow-Origin' header

The browser refused to give your page the response because the API didn't say your site is allowed to read it.

SupabaseDatabaseAuth

Supabase: new row violates row-level security policy

Row Level Security is on for that table, but no policy allows this user to insert (or update) this row.

SupabaseDatabase

Supabase query returns [] with no error

RLS is filtering the rows out silently. A SELECT that no policy allows returns zero rows, not an error.

SupabaseAPI keysEnv vars

Supabase: Invalid API key / legacy API keys disabled

The key your app sends doesn't match the project, or it's a legacy anon/service_role key that has been disabled.

FirebaseDatabaseAuth

Firebase: Missing or insufficient permissions

Your Firestore (or Storage / Realtime Database) security rules don't allow this read or write.

FirebaseAuthDeploy

Firebase Auth: auth/unauthorized-domain

Your deployed domain isn't in Firebase Authentication's authorized domains list.

AuthOAuthDeploy

Error 400: redirect_uri_mismatch (Google / GitHub OAuth)

The callback URL your app sent isn't exactly one of the redirect URIs registered for that OAuth client.

AI APIsRate limits

OpenAI / LLM API: 429 Too Many Requests or insufficient_quota

Either you're sending requests too fast, or the account has no credit left. Same status code, different fixes.

AI APIsAPI keysEnv vars

401 Incorrect API key provided / authentication_error

The API received a key, but it's wrong, revoked, from another org/project, or mangled.

npmDependencies

npm ERR! ERESOLVE unable to resolve dependency tree

Two packages want incompatible versions of a shared dependency (often React or Next.js), and npm refuses to guess.

BuildImports

Module not found: Can't resolve '...'

An import points at a file or package that isn't there, or a path alias the build doesn't know.

BuildDeployImports

Build works on my Mac, fails on deploy: wrong file name case

macOS and Windows ignore letter case in file names. Linux build servers don't.

TailwindCSSDependencies

Tailwind: trying to use tailwindcss directly as a PostCSS plugin

Tailwind CSS v4 moved its PostCSS plugin into @tailwindcss/postcss, but your config still uses the v3 setup.

TailwindCSS

Tailwind classes not applying (no styles, or some classes missing)

Tailwind only generates CSS for complete class names it can find in your source files.

NodeLocal dev

Error: listen EADDRINUSE: address already in use :::3000

Another process (often an old copy of your dev server) is already using that port.

DeployNodeHosting

App runs but the preview is blank / unreachable (bind to 0.0.0.0 and PORT)

In containers and cloud hosts, your server must listen on 0.0.0.0 and on the port the platform gives you.

DeployReactRouting

Page works until I refresh, then 404 (React Router / SPA on static hosting)

Your single-page app handles routes in the browser, but the host looks for a real file at /dashboard and doesn't find one.

StripePaymentsAPI

Stripe: No signatures found matching the expected signature for payload

Stripe signs the raw request body. Your code verified a parsed or modified body, or used the wrong signing secret.

DeployAPIEnv vars

TypeError: Failed to fetch / ECONNREFUSED: app calls localhost in production

The deployed app still points at http://localhost, which on your user's device (or the server) is not your backend.

DeploySecurityAPI

Mixed Content: page loaded over HTTPS requested an insecure resource

Your HTTPS site tried to call an http:// URL, and the browser blocked it.

JavaScriptReact

TypeError: Cannot read properties of undefined (reading 'map')

Your code used a value before it existed, usually data that hasn't loaded yet or an API response with a different shape.

React

Objects are not valid as a React child

JSX tried to render a whole object (or a Promise or Date) instead of a string, number, or element.

React

Too many re-renders / Maximum update depth exceeded

A state update runs on every render, which causes another render, forever.

NodeModulesDependencies

ERR_REQUIRE_ESM: require() of ES Module not supported

CommonJS code (require) is loading a package that only ships ES modules (import).

NodeModules

SyntaxError: Cannot use import statement outside a module

Node is treating your file as CommonJS, but it uses import/export syntax.

VercelDeployAI APIs

Vercel: FUNCTION_INVOCATION_TIMEOUT / 504 on AI requests

Your serverless function ran longer than its maximum duration, which is common when waiting for a long LLM response.

TypeScriptBuildDeploy

Build failed: Type error (passes in dev, fails in next build)

Dev mode is lenient about types; production builds run the type checker and stop on errors.

GitSecurityAPI keys

GitHub: Push cannot contain secrets (GH013 push protection)

GitHub found an API key or token in your commits and blocked the push. Good: it stopped a leak.

NodeDeployDependencies

The engine "node" is incompatible / unsupported Node version on deploy

Your host is building with an older (or different) Node.js than your packages need.

WorkflowAI tools

The AI keeps 'fixing' the same bug and making it worse

Each blind retry adds more code and more guesses. Stop patching and get a diagnosis first.