FAQ & Troubleshooting

Frequently Asked Questions

General Questions

Q: Is Devfund free to use?

A: Yes! Devfund is completely free and open-source. There are no usage fees or hidden charges.

Q: Do I need a Devfund account to use components?

A: You need a Devfund profile created at https://devfund.in to display your payment information.

Q: Can I use Devfund with my existing project?

A: Absolutely! Devfund works with any React or Next.js project. Just install and generate a component.

Q: Which React versions are supported?

A: React 16.8+, including React 17 and React 18.

Q: Is Devfund suitable for production?

A: Yes! Devfund components are production-ready with comprehensive error handling, accessibility support, and security features.

---

Troubleshooting

Installation Issues

Problem: "Command not found: npx devfund"

Solution:

1. Ensure you have Node.js 14+ and npm 6.9+:

   bashCopy
   node --version  # Should be 14+
   npm --version   # Should be 6.9+

2. Update npm to latest:

   bashCopy
   npm install -g npm@latest

3. Try again:

   bashCopy
   npx devfund@latest card

Problem: "Tailwind CSS styles not applied"

Solution:

1. Verify Tailwind CSS is installed:

   bashCopy
   npm list tailwindcss

2. Check tailwind.config.ts includes your component paths:

   typescriptCopy
   content: [
     "./app/**/*.{js,ts,jsx,tsx}",
     "./components/**/*.{js,ts,jsx,tsx}",
   ]

3. Ensure globals.css is imported in your layout:

   tsxCopy
   import '@/app/globals.css';

4. Rebuild:

   bashCopy
   npm run dev

Problem: "Permission denied" when generating component

Solution:

1. Check directory permissions:

   bashCopy
   ls -la components/

2. If needed, fix permissions:

   bashCopy
   chmod 755 components/

3. Or generate to a different location and move the file manually.

---

Component Issues

Problem: Component shows "Error loading user"

Solution:

Check these things in order:

1. Username exists:

   • Go to https://devfund.in/@{username}
   • If 404, create a profile first

2. Username spelling:

   • Component requires exact username match
   • Check for typos and case sensitivity

3. Profile is complete:

   • Ensure you've added at least one UPI ID
   • Generate and upload QR code

4. Internet connection:

   • Check that your device can access the internet
   • Try in a different network

5. API status:

   • Check if Devfund API is up:
   • Visit: https://www.devfund.in/api/profile/dev

Still having issues? Check browser console for detailed error messages.

Problem: Component doesn't render at all

Solution:

1. Check imports:

   tsxCopy
   // Correct
   import CardPaymentQR from '@/components/devfund/CardPaymentQR';
   
   // Wrong
   import CardPaymentQR from '../components/devfund/CardPaymentQR';

2. Check file exists:

   bashCopy
   ls components/devfund/

3. Verify props:

   tsxCopy
   // Must pass username prop
   <CardPaymentQR username="yourname" />
   
   // Won't work
   <CardPaymentQR />

4. Check console for errors:

   • Open DevTools (F12)
   • Check Console tab for error messages

5. Rebuild project:

   bashCopy
   npm run dev

Problem: QR code not displaying

Solution:

1. Check QR code exists in profile:

   • Go to your profile settings
   • Ensure QR code is generated and uploaded

2. Check API response:

   • Open DevTools Network tab
   • Look for requests to devfund-rust.vercel.app
   • Check if qrCodeImage field is present

3. Try clearing cache:

   bashCopy
   # Hard refresh in browser
   Ctrl+Shift+R (Windows/Linux)
   Cmd+Shift+R (Mac)

4. Check if QR code URL is accessible:

   • Copy the image URL from API response
   • Paste in new browser tab
   • Image should load

Problem: Modal won't close

Solution:

1. Check if Escape key works:

   • Click inside modal
   • Press Escape key
   • Should close

2. Check if close button is clickable:

   • Click the × button
   • Should close modal

3. Check for console errors:

   • Open DevTools Console
   • Look for JavaScript errors
   • Fix any errors found

4. Try clearing browser cache:

   bashCopy
   # Clear cache and cookies for the site

---

Styling Issues

Problem: Styles look different on production

Solution:

1. Rebuild CSS:

   bashCopy
   npm run build

2. Check Tailwind CSS configuration:

   • Ensure content paths are correct
   • Include all relevant file patterns

3. Verify no CSS conflicts:

   • Check for conflicting CSS classes
   • Use CSS specificity to override if needed

4. Check purging settings:

   typescriptCopy
   // tailwind.config.ts
   content: [
     "./app/**/*.{js,ts,jsx,tsx}",
     "./components/**/*.{js,ts,jsx,tsx}",
   ]

Problem: Component looks misaligned

Solution:

1. Check if container has enough space:

   tsxCopy
   <div className="flex items-center justify-center min-h-screen">
     <CardPaymentQR username="yourname" />
   </div>

2. Check responsive design:

   • Test on different screen sizes
   • Use max-w- classes to constrain width

3. Check z-index conflicts:

   • Modal uses z-50, ensure nothing higher
   • Or update z-index in component

Problem: Button text overflows

Solution:

1. Reduce text length:

   tsxCopy
   // Component generates: "💛 Support {DisplayName}"
   // Keep display names short

2. Adjust button width: Edit component and change padding:

   tsxCopy
   className="px-4 py-2"  // Reduce padding

---

Performance Issues

Problem: Component loads slowly

Solution:

1. Use lazy loading:

   tsxCopy
   import dynamic from 'next/dynamic';
   
   const CardPaymentQR = dynamic(
     () => import('@/components/devfund/CardPaymentQR')
   );

2. Enable image optimization:

   • QR codes should be optimized
   • Use Next.js Image component if modifying

3. Check network:

   • Open DevTools Network tab
   • See which requests are slow
   • Check API latency

4. Reduce components on page:

   • Multiple components can affect performance
   • Show only when needed

Problem: High network latency

Solution:

1. Check internet connection:

   • Run speed test
   • Ensure stable connection

2. Check API availability:

   • Visit: https://www.devfund.in/health
   • If down, wait for recovery

3. Use cached data:

   tsxCopy
   const cached = localStorage.getItem(`user_${username}`);
   if (cached) {
     // Use cached data
   }

---

TypeScript Issues

Problem: "Cannot find module" error

Solution:

1. Check import path:

   tsxCopy
   // Correct
   import CardPaymentQR from '@/components/devfund/CardPaymentQR';
   
   // Wrong
   import CardPaymentQR from '@/components/CardPaymentQR';

2. Check TypeScript config:

   jsonCopy
   {
     "compilerOptions": {
       "paths": {
         "@/*": ["./*"]
       }
     }
   }

3. Rebuild TypeScript:

   bashCopy
   npm run build

Problem: Type errors with props

Solution:

Components are fully typed. If errors appear:

tsxCopy
// Types are built-in
interface DevfundComponentProps {
  username: string;  // Required string
}

// Use correctly
<CardPaymentQR username="dev" />  // ✅
<CardPaymentQR username={123} />  // ❌ TypeScript error

---

Accessibility Issues

Problem: Screen reader doesn't announce component

Solution:

1. Verify ARIA labels are present:

   • Components include ARIA labels by default
   • Check browser accessibility inspector

2. Test with screen reader:

   • Use NVDA (Windows), JAWS, or VoiceOver (Mac)
   • Navigate with keyboard
   • Should announce button and modal

3. Check focus management:

   • Tab through component
   • Focus should move properly
   • Close button should be reachable

---

API Issues

Problem: "Request timeout" error

Solution:

1. Check internet connection:

   bashCopy
   ping devfund-rust.vercel.app

2. Check API status: Visit: https://www.devfund.in/api/profile/dev

3. Increase timeout: Edit component and modify timeout value:

   tsxCopy
   signal: AbortSignal.timeout(20000), // 20 seconds

4. Check firewall/VPN:

   • Disable VPN if using
   • Check corporate firewall

Problem: "Server error" (500 status)

Solution:

This is usually temporary:

1. Wait a few minutes and retry:

   • Reload the page
   • Try again later

2. Check status page:

   • Visit: https://status.devfund.in (if available)

3. Report the issue:

   • Contact support with error details
   • Include username and timestamp

Problem: "User not found" (404 error)

Solution:

1. Create profile:

   • Go to https://devfund.in
   • Click "Create your page"
   • Fill in all required information

2. Check username:

   • Use exact username in component
   • Usernames are case-sensitive

3. Verify profile is public:

   • Go to your profile
   • Ensure it's not in draft mode

---

Advanced Issues

Problem: Component works locally but not on production

Solution:

1. Check environment variables:

   • Ensure .env.local is set in production
   • Use .env.production for production-specific vars

2. Verify API access:

   • Check if production server can reach API
   • Check firewall/CORS settings

3. Clear build cache:

   bashCopy
   rm -rf .next
   npm run build

4. Check Node version:

   • Ensure production Node version matches local
   • Update if needed

Problem: CORS errors in browser

Solution:

1. This shouldn't happen - API has CORS enabled
2. If it does:
   • Check browser console for exact error
   • Try in incognito/private mode
   • Clear browser cache

---

Getting Help

If you can't find a solution:

1. Check console errors:

   • Open DevTools (F12)
   • Go to Console tab
   • Copy full error message

2. Search GitHub issues:

   • Visit: https://github.com/icancodefyi/devfund
   • Search for similar issues

3. Create an issue:

   • Include error message
   • Include reproduction steps
   • Include your Node/npm version

4. Contact support:

   • Email: support@devfund.in (if available)
   • Twitter: @devfund_io (if available)

---

Common Error Messages

---

Performance Benchmarks

Expected performance metrics:

• Initial load: < 1 second (with fast internet)
• Modal open: < 100ms
• API response: < 2 seconds
• Component size: ~5KB (minified)
• Bundle impact: Minimal (lazy loaded by default)

---

Still Need Help?

Visit our documentation: https://docs.devfund.in

Or create an issue on GitHub: https://github.com/icancodefyi/devfund/issues