preflower / react-barcode-scanner

A lightweight React scan library based on modern API
https://reactbarcodescanner.vercel.app/
MIT License
36 stars 4 forks source link

TypeError: t is not a function #293

Open Dominic-Preap opened 1 week ago

Dominic-Preap commented 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.

image

'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>
);
preflower commented 6 days ago

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;