skatespots/SkateSpots
1
0
Fork 0
Code Issues Pull requests Projects Releases 11 Packages Wiki Activity Actions 1

Fix blank QR in ShareProfileDialog — import qrcode lazily

Browse source 
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 <assistant@shakespeare.diy>
This commit is contained in:
shakespeare.diy 2026-09-02 22:12:45 +07:00
parent deb8fe1995
commit 1b57f79cba
1 changed files with 9 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/components/ShareProfileDialog.tsx
View file

@ -1,9 +1,9 @@
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import QRCode from 'qrcode';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog'; import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Check, Copy, Share2, Loader2 } from 'lucide-react'; import { Check, Copy, Share2, Loader2 } from 'lucide-react';
import { useToast } from '@/hooks/useToast'; import { useToast } from '@/hooks/useToast';
import { generateQRCode } from '@/lib/wallet/qrCodeGenerator';
interface ShareProfileDialogProps { interface ShareProfileDialogProps {
open: boolean; open: boolean;
@ -33,14 +33,15 @@ export function ShareProfileDialog({ open, onOpenChange, npub, displayName }: Sh
useEffect(() => { useEffect(() => {
if (!open) return; if (!open) return;
let active = true; let active = true;
QRCode.toDataURL(shareUrl, { setQr(null);
width: 320, // qrcode must be imported lazily (see generateQRCode) — a top-level import
margin: 1, // crashes on its canvas dependency at module load.
color: { dark: '#000000', light: '#ffffff' }, generateQRCode(shareUrl)
errorCorrectionLevel: 'M',
})
.then((url) => { if (active) setQr(url); }) .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; }; return () => { active = false; };
}, [open, shareUrl]); }, [open, shareUrl]);