BrowserMultiFormatReader from @zxing/browser is not working with weird error message.

[kunjee17]

I am trying to use zxing library with react (browser).

Below code is working

import { Button, Typography } from '@material-ui/core';
import { BrowserMultiFormatReader } from '@zxing/library';
import { useState } from 'react';

export const QrCode = () => {
  const [qrCode, setQRCode] = useState('');
  return (
    <div>
      <img id={'qr-img'} width={200} height={200} src="../assets/qrcode.png" alt={'QR Code'} />
      <br />
      <Button
        variant={'contained'}
        color={'primary'}
        onClick={async () => {
          console.log('Reading starts');
          const codeReader = new BrowserMultiFormatReader();
          const res = await codeReader.decodeFromImageUrl('../assets/qrcode.png');
          setQRCode(res.getText());
        }}>
        decode
      </Button>
      <Typography variant={'h6'}>{qrCode}</Typography>
    </div>
  );
};

But if I change to the import from @zxing/browser it stops working

import { BrowserMultiFormatReader } from '@zxing/browser';
// Same code as above

Here is the error.

Uncaught (in promise) TypeError: class constructors must be invoked with 'new'
    HTMLCanvasElementLuminanceSource vendor.js:41066
    node_modules vendor.js:41653
    node_modules vendor.js:41970
    node_modules vendor.js:41958
    node_modules vendor.js:42527
    step vendor.js:41427
    verb vendor.js:41408
    node_modules vendor.js:41402
    node_modules vendor.js:41398
    node_modules vendor.js:42516
    node_modules vendor.js:41986
    step vendor.js:41427
    verb vendor.js:41408
    node_modules vendor.js:41402
    node_modules vendor.js:41398
    node_modules vendor.js:41977
    node_modules vendor.js:42014
    step vendor.js:41427
    verb vendor.js:41408
    node_modules vendor.js:41402
    node_modules vendor.js:41398
    node_modules vendor.js:42000
    onClick qrCode.tsx:17
    callCallback vendor.js:79222
    invokeGuardedCallbackDev vendor.js:79271
    invokeGuardedCallback vendor.js:79333
    invokeGuardedCallbackAndCatchFirstError vendor.js:79347
    executeDispatch vendor.js:83520
    processDispatchQueueItemsInOrder vendor.js:83552
    processDispatchQueue vendor.js:83565
    dispatchEventsForPlugins vendor.js:83576
    dispatchEventForPluginEventSystem vendor.js:83785
    batchedEventUpdates$1 vendor.js:97668
    batchedEventUpdates vendor.js:79022
    dispatchEventForPluginEventSystem vendor.js:83784
    attemptToDispatchEvent vendor.js:81282
    dispatchEvent vendor.js:81201
    unstable_runWithPriority vendor.js:108247
    runWithPriority$1 vendor.js:86553
    discreteUpdates$1 vendor.js:97685
    discreteUpdates vendor.js:79033
    dispatchDiscreteEvent vendor.js:81166
    addEventBubbleListener vendor.js:81288
    addTrappedEventListener vendor.js:83688
    listenToNativeEvent vendor.js:83651
    listenToAllSupportedEvents vendor.js:83603
    listenToAllSupportedEvents vendor.js:83601
    createRootImpl vendor.js:101159
    ReactDOMBlockingRoot vendor.js:101107
    createLegacyRoot vendor.js:101172
    legacyCreateRootFromDOMContainer vendor.js:101253
    legacyRenderSubtreeIntoContainer vendor.js:101279
    render vendor.js:101375
    tsx main.tsx:6
    Webpack 6
vendor.js:41066:28
    onClick qrCode.tsx:18
    AsyncFunctionThrow self-hosted:694
    (Async: async)
    callCallback vendor.js:79222
    invokeGuardedCallbackDev vendor.js:79271
    invokeGuardedCallback vendor.js:79333
    invokeGuardedCallbackAndCatchFirstError vendor.js:79347
    executeDispatch vendor.js:83520
    processDispatchQueueItemsInOrder vendor.js:83552
    processDispatchQueue vendor.js:83565
    dispatchEventsForPlugins vendor.js:83576
    dispatchEventForPluginEventSystem vendor.js:83785
    batchedEventUpdates$1 vendor.js:97668
    batchedEventUpdates vendor.js:79022
    dispatchEventForPluginEventSystem vendor.js:83784
    attemptToDispatchEvent vendor.js:81282
    dispatchEvent vendor.js:81201
    bind_applyFunctionN self-hosted:1371
    dispatchEvent self-hosted:1334
    unstable_runWithPriority vendor.js:108247
    runWithPriority$1 vendor.js:86553
    discreteUpdates$1 vendor.js:97685
    discreteUpdates vendor.js:79033
    dispatchDiscreteEvent vendor.js:81166
    bind_applyFunctionN self-hosted:1371
    dispatchDiscreteEvent self-hosted:1334
    (Async: EventListener.handleEvent)
    addEventBubbleListener vendor.js:81288
    addTrappedEventListener vendor.js:83688
    listenToNativeEvent vendor.js:83651
    listenToAllSupportedEvents vendor.js:83603
    forEach self-hosted:4324
    listenToAllSupportedEvents vendor.js:83601
    createRootImpl vendor.js:101159
    ReactDOMBlockingRoot vendor.js:101107
    createLegacyRoot vendor.js:101172
    legacyCreateRootFromDOMContainer vendor.js:101253
    legacyRenderSubtreeIntoContainer vendor.js:101279
    render vendor.js:101375
    tsx main.tsx:6
    Webpack 6

Don't have any idea what I am missing here.

I was trying to use BrowserMultiFormatReader from library for decode from video. Where things are working all good other than reset method. Then while going through issues I found out that, for using inside the browser, it would be good to use wrapper package @zxing/browser and it just stops working. Neither video works nor image decode. All breaks with above code.

[giorgiopagnoni]

Same issue here.

[Phillinger]

Same issue here since the release of @zxing/browser Version 0.0.9. Worked fine with 0.0.8.

[partikus]

Hello there! For me, the issue occurs because the loaders mismatching. I was using cjs but @zxing/browser was importing library using esm. I hope it helps to solve the issue globally. I solved that issue adding aliases to webpack.config.js:

resolve: {
    alias: {
        '@zxing/library': '@zxing/library/cjs/index',
        '@zxing/browser': '@zxing/browser/cjs/index',   
    },
},