From 1b57f79cba86b93234422fff6d0634f0b85ecbd5 Mon Sep 17 00:00:00 2001 From: "shakespeare.diy" Date: Wed, 2 Sep 2026 22:12:45 +0700 Subject: [PATCH] =?UTF-8?q?Fix=20blank=20QR=20in=20ShareProfileDialog=20?= =?UTF-8?q?=E2=80=94=20import=20qrcode=20lazily?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Top-level `import QRCode from 'qrcode'` crashes on its canvas dependency at module load, leaving the QR blank. Switch to the shared generateQRCode helper which imports qrcode lazily (dynamic import), matching every other working QR in the app. Also reset the QR while regenerating and log failures. Co-authored-by: shakespeare.diy --- src/components/ShareProfileDialog.tsx | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/src/components/ShareProfileDialog.tsx b/src/components/ShareProfileDialog.tsx index 8d28edc..fb501c6 100644 --- a/src/components/ShareProfileDialog.tsx +++ b/src/components/ShareProfileDialog.tsx @@ -1,9 +1,9 @@ import { useEffect, useState } from 'react'; -import QRCode from 'qrcode'; import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog'; import { Button } from '@/components/ui/button'; import { Check, Copy, Share2, Loader2 } from 'lucide-react'; import { useToast } from '@/hooks/useToast'; +import { generateQRCode } from '@/lib/wallet/qrCodeGenerator'; interface ShareProfileDialogProps { open: boolean; @@ -33,14 +33,15 @@ export function ShareProfileDialog({ open, onOpenChange, npub, displayName }: Sh useEffect(() => { if (!open) return; let active = true; - QRCode.toDataURL(shareUrl, { - width: 320, - margin: 1, - color: { dark: '#000000', light: '#ffffff' }, - errorCorrectionLevel: 'M', - }) + setQr(null); + // qrcode must be imported lazily (see generateQRCode) — a top-level import + // crashes on its canvas dependency at module load. + generateQRCode(shareUrl) .then((url) => { if (active) setQr(url); }) - .catch(() => { if (active) setQr(null); }); + .catch((err) => { + console.error('[ShareProfileDialog] QR generation failed:', err); + if (active) setQr(null); + }); return () => { active = false; }; }, [open, shareUrl]);