whatwecando/error-memory

Error Memory — Dagsmith Tombola

Consult this before implementing to avoid known pitfalls.

Next.js 15 App Router

Server vs Client Component Confusion

• Symptom: "useState is not a function" or "useEffect is not defined" in server component
• Root cause: Using React hooks in a Server Component (default in App Router)
• Fix: Add "use client" directive at the top of files that use hooks, event handlers, or browser APIs
• Stack: Next.js 15 App Router

API Route Handler Signature

• Symptom: Route handler receives empty request body or wrong params
• Root cause: Next.js 15 API routes use Web Request/Response API, not Express-style (req, res)
• Fix: Use export async function POST(request: Request) and request.json() for body. Dynamic params come from the second argument: { params }: { params: { id: string } }
• Stack: Next.js 15 App Router

Cookies in Server Components

• Symptom: Cannot read cookies in server component or API route
• Root cause: Using document.cookie instead of Next.js cookie API
• Fix: Use cookies() from next/headers in server components/route handlers. For setting cookies from API routes, use NextResponse with .cookies.set()
• Stack: Next.js 15

Dynamic Route Params Promise

• Symptom: params.id is undefined or a Promise
• Root cause: In Next.js 15, params in page/layout/route files is now a Promise
• Fix: Await params: const { id } = await params in page.tsx and route.ts
• Stack: Next.js 15

Drizzle ORM (SQLite)

SQLite Integer vs Boolean

• Symptom: Boolean columns store/return 0/1 instead of true/false
• Root cause: SQLite has no native boolean type, stores as INTEGER
• Fix: Use integer('column', { mode: 'boolean' }) in Drizzle schema for automatic conversion
• Stack: Drizzle ORM + SQLite

Drizzle Migration vs Push

• Symptom: Schema changes not reflected in database
• Root cause: Using drizzle-kit push in development but drizzle-kit generate + migrate in production
• Fix: Use drizzle-kit push for development (direct schema sync). Use drizzle-kit generate + programmatic migration for production.
• Stack: Drizzle ORM

Nullable Column Queries

• Symptom: Queries return unexpected results for nullable columns
• Root cause: SQLite NULL comparison requires IS NULL not = NULL
• Fix: Use isNull(table.column) or isNotNull(table.column) from drizzle-orm, not eq(table.column, null)
• Stack: Drizzle ORM

shadcn/ui + Tailwind

shadcn/ui Import Path

• Symptom: "Module not found" for shadcn/ui component
• Root cause: Components must be added via CLI before importing
• Fix: Run npx shadcn-ui@latest add button (or card, input, etc.) before importing from @/components/ui/button
• Stack: shadcn/ui

Tailwind CSS 4 Config

• Symptom: Custom styles not applied, classes not generated
• Root cause: Tailwind CSS 4 uses CSS-based configuration, not JS config
• Fix: Check that content paths include src/**/*.{ts,tsx} and that @import "tailwindcss" is in globals.css
• Stack: Tailwind CSS 4

Claude Vision API

Image Encoding for API

• Symptom: Claude Vision returns error about invalid image
• Root cause: Image must be base64 encoded with correct media type
• Fix: Read file as Buffer, convert to base64: Buffer.from(file).toString('base64'). Set media_type to image/jpeg or image/png matching the actual format.
• Stack: Anthropic SDK

Structured JSON Output from Vision

• Symptom: Claude Vision returns free-text instead of JSON
• Root cause: Prompt not sufficiently structured to force JSON output
• Fix: Use a system prompt that says "Respond ONLY with valid JSON" and provide an example JSON structure in the user prompt. Parse with try/catch and handle malformed responses.
• Stack: Anthropic SDK + Claude Vision

File Upload (Next.js)

FormData Parsing in Route Handlers

• Symptom: Cannot read uploaded file from request
• Root cause: Next.js App Router route handlers need request.formData() not multer
• Fix: Use const formData = await request.formData(); const file = formData.get('file') as File; const buffer = Buffer.from(await file.arrayBuffer())
• Stack: Next.js 15