Common Issues

Quick fixes for frequently encountered problems.

Build Errors

Module not found

Module not found: Can't resolve '@/components/...'

Fix: Check the import path. Ensure the file exists and the path alias is correct.

# Verify the file exists
ls components/ui/button.tsx
 
# If using new files, restart the dev server
npm run dev

Type errors after schema changes

Type 'X' is not assignable to type 'Y'

Fix: Regenerate Prisma Client after schema changes.

npx prisma generate

hydration mismatch

Hydration failed because the initial UI does not match...

Fix: This usually happens when client-rendered content differs from server-rendered. Common causes:

• Using Date.now() or Math.random() in initial render
• Browser extensions modifying the DOM
• Using browser-only APIs without checks

// Bad
<p>{new Date().toISOString()}</p>
 
// Good - use client component
"use client"
import { useEffect, useState } from 'react'
 
function CurrentTime() {
  const [time, setTime] = useState('')
 
  useEffect(() => {
    setTime(new Date().toISOString())
  }, [])
 
  return <p>{time}</p>
}

Development Server

Port already in use

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

Fix: Kill the process using the port or use a different port.

# Find the process
lsof -i :3000
 
# Kill it
kill -9 <PID>
 
# Or use a different port
npm run dev -- -p 3001

Hot reload not working

Fix:

1. Clear .next folder
2. Restart dev server

rm -rf .next
npm run dev

Environment Variables

Variables not loading

Error: Missing required environment variable: DATABASE_URL

Fix:

1. Ensure .env.local exists in the project root
2. Variables must be prefixed with NEXT_PUBLIC_ for client-side access
3. Restart the dev server after adding variables

# Check if file exists
cat .env.local
 
# Restart
npm run dev

Variables undefined in client components

Fix: Only NEXT_PUBLIC_* variables are available client-side.

// Server-side only
const secret = process.env.PAYSTACK_SECRET_KEY
 
// Available client-side
const publicKey = process.env.NEXT_PUBLIC_PAYSTACK_PUBLIC_KEY

Prisma Issues

Cannot find module ‘.prisma/client’

Fix: Generate the Prisma Client.

npx prisma generate

Migration failed

Error: P3009: migrate found failed migrations

Fix:

# Mark the migration as resolved
npx prisma migrate resolve --applied <migration_name>
 
# Or reset (development only - loses all data)
npx prisma migrate reset

Connection timeout

Error: Connection terminated unexpectedly

Fix:

1. Check DATABASE_URL is correct
2. Ensure using port 6543 for pooled connection
3. Verify Supabase project is not paused

Authentication

Session not persisting

Fix:

1. Check NEXTAUTH_SECRET is set
2. Verify NEXTAUTH_URL matches your domain
3. Clear cookies and try again

OAuth redirect error

Fix:

1. Add your domain to allowed redirect URLs in Google Console
2. Ensure callback URL matches exactly:
   • Dev: http://localhost:3000/api/auth/callback/google
   • Prod: https://y3nko.travel/api/auth/callback/google

TypeScript

Cannot find name ‘React’

Fix: Add React import or configure tsconfig.

// Option 1: Import React
import React from 'react'
 
// Option 2: tsconfig.json (already configured)
{
  "compilerOptions": {
    "jsx": "preserve"
  }
}

‘any’ type warnings

Fix: Add proper types.

// Bad
function processData(data: any) {}
 
// Good
interface DataType {
  id: string
  name: string
}
function processData(data: DataType) {}

Next.js

Page not found (404) for existing page

Fix:

1. Ensure file is named page.tsx (not Page.tsx or index.tsx)
2. Check folder structure matches expected URL
3. Restart dev server

Images not loading

Fix: Add domain to next.config.js:

// next.config.js
module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'res.cloudinary.com',
      },
    ],
  },
}

Still Stuck?

1. Check the console for detailed error messages
2. Search existing GitHub issues
3. Ask in the team chat with:
   • Error message
   • Steps to reproduce
   • What you’ve tried