Open Dominic-Preap opened 1 week ago
Hi, we're having an error log on Next.js v14, regarding on server component despite using use client directive, the zbar-wasm is still load. The exmple code is below.
use client
'use client'; import 'react-barcode-scanner/polyfill'; import { IconBulb, IconBulbOff, IconX } from '@tabler/icons-react'; import { BarcodeScanner, useTorch } from 'react-barcode-scanner'; import { BaseDialog } from '@/components/molecules/base-dialog'; import { CameraSnapFrame } from '../camera/camera-snap-frame'; interface Props { open: boolean; onClose: () => void; onCapture: (value: string) => void; } export const BarcodeScannerDialog: React.FC<Props> = props => { const { open, onClose, onCapture } = props; const [isSupportTorch, isOpen, onTorchSwitch] = useTorch(); const Icon = isOpen ? IconBulbOff : IconBulb; const bulbText = isOpen ? 'Flash Off' : 'Flash On'; return ( <BaseDialog open={open} panelClassName="h-dvh w-dvw max-w-none p-0 -m-8 bg-black rounded-none"> <div className="relative h-full w-full" id="camera-screen"> <BarcodeScanner options={{ delay: 500, formats: ['qr_code', 'code_128'] }} onCapture={v => { onCapture(v.at(0)?.rawValue || ''); onClose(); }} /> <CameraSnapFrame className="!aspect-h-1 !aspect-w-1" note="Scan Here" /> <div className="absolute bottom-8 left-1/2 flex space-x-8 -translate-x-1/2"> <ScannerButton icon={IconX} onClick={onClose} title="Close" /> {isSupportTorch && <ScannerButton icon={Icon} onClick={onTorchSwitch} title={bulbText} />} </div> </div> </BaseDialog> ); }; interface ScannerButtonProps { icon: React.ElementType; title: string; onClick: () => void; } const ScannerButton: React.FC<ScannerButtonProps> = ({ icon: Icon, title, onClick }) => ( <button onClick={onClick} className="flex items-center justify-center space-x-2 rounded-full bg-white px-4 py-3 shadow" > <Icon className="size-6 shrink-0 text-green" /> <span className="text-nowrap font-medium">{title}</span> </button> );
This is a error about wasm, according to zbar-wasm issue, it's be fixed in 0.9.16, i will update version to fix it;
Hi, we're having an error log on Next.js v14, regarding on server component despite using
use client
directive, the zbar-wasm is still load. The exmple code is below.