Loading...
Loading...
Common issues, error messages, debugging tips, and solutions for library templates.
[ERROR]: Cannot find module '@/design-system'
Cause: Design system module not set up or path alias not configured.
[FIX]:
1// 1. Verify tsconfig.json has path alias2{3 "compilerOptions": {4 "paths": {5 "@/*": ["./src/*"]6 }7 }8}910// 2. Create design-system.ts if missing11// src/design-system.ts12export const mode = {13 font: "font-mono",14 radius: "rounded-none",15 color: {16 text: {17 muted: "text-muted-foreground",18 primary: "text-primary",19 }20 }21};
[ERROR]: Module not found: Can't resolve '@/components/ui/...'
Cause: Component not installed or wrong path.
[FIX]:
1. Check component exists: ls src/components/ui/
2. Install missing component from components documentation
3. Verify import path matches file location
[ERROR]: Property 'mode' does not exist on type ''
Cause: Design system types not exported properly.
[FIX]:
1// src/design-system.ts2export const mode = {3 font: "font-mono",4 radius: "rounded-none",5 // ... rest of design system6} as const;78// Regenerate types9npm run type-check
[ERROR]: Type 'Promise' is not assignable to type 'ReactNode'
Cause: Next.js 15 async params not awaited.
[FIX]:
1// ✗ Wrong2export default function Page({ params }) {3 const { id } = params; // params is Promise45// ✓ Correct6export default async function Page({ params }) {7 const { id } = await params; // Must await
[ISSUE]: Tailwind classes not applying
Cause: Template path not in Tailwind config content array.
[FIX]:
1// tailwind.config.ts2export default {3 content: [4 "./src/**/*.{ts,tsx}", // Include all template files5 "./app/**/*.{ts,tsx}",6 ],7 // ... rest of config8};910// Restart dev server11npm run dev
[ISSUE]: Terminal aesthetic not working
Cause: Missing font-mono on body tag or design system not imported.
[FIX]:
1// app/layout.tsx2<body className="font-mono antialiased">3 {children}4</body>56// Or in component7import { mode } from "@/design-system";89<div className={mode.font}>Content</div>
[ERROR]: Hydration mismatch
Cause: Server and client rendering differ (common with date/time or random values).
[FIX]:
1// Use suppressHydrationWarning for dynamic content2<div suppressHydrationWarning>3 {new Date().toLocaleString()}4</div>56// Or use useEffect for client-only rendering7const [mounted, setMounted] = useState(false);8useEffect(() => setMounted(true), []);910if (!mounted) return null;
[ERROR]: Too many re-renders
Cause: State update in render function causing infinite loop.
[FIX]:
1// ✗ Wrong - causes infinite loop2function Component() {3 const [count, setCount] = useState(0);4 setCount(count + 1); // DON'T do this56// ✓ Correct - update in effect or event handler7function Component() {8 const [count, setCount] = useState(0);910 useEffect(() => {11 setCount(count + 1);12 }, []); // Run once on mount
[ISSUE]: Template loads slowly
Solutions:
Template not showing after paste:
Verify route matches file location. Check for typos in directory names.
Mock data still showing:
Replace mock data imports with real API calls or database queries.
Icons not rendering:
Install lucide-react: npm install lucide-react
Build failing in production:
Run npm run type-check and fix TypeScript errors before deploying.
If you're still experiencing issues:
Check Console
Open browser DevTools (F12) and check Console tab for error messages.
Review Logs
Check terminal output where dev server is running for build errors.
Useful debugging commands:
1$# Clear cache and restart2$rm -rf .next && npm run dev34$# Check TypeScript errors5$npm run type-check67$# Verify all dependencies installed8$npm install910$# Check for missing peer dependencies11$npm ls