Failed to run demo: Cannot read property 'ImageWrapper' of undefined

I’m trying to run this demo in React, but always got error:

import React, { useState, FC, useRef, useEffect, isValidElement } from "react";

import { QuaggaJSStatic } from "@ericblade/quagga2";
import QuaggaLib from "@ericblade/quagga2/lib/quagga";

let Quagga: QuaggaJSStatic = QuaggaLib;

let BarcodeArea: FC<{}> = (props) => {
  let videoElementRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    Quagga.init(
      {
        inputStream: {
          type: "LiveStream",
          target: videoElementRef.current,
          constraints: {
            width: 400,
            height: 400,
          },
        },
        locate: false,
        numOfWorkers: 2,
        frequency: 10,
        decoder: {
          readers: ["code_128_reader"],
        },
      },
      (err) => {
        if (err) {
          console.error(err);
          return;
        }

        console.log("started");
        Quagga.start();
      }
    );

    Quagga.onDetected((result) => {
      console.log("detect", result);
    });

    Quagga.onProcessed((result) => {
      console.log("process", result);
    });

    return () => {
      Quagga.stop();
    };
  }, []);

  return <div className={styleVideo} ref={videoElementRef}></div>;
};

Also I tried to run the demo at http://localhost:8080/example/live_w_locator.html by fixing the paths and adding Quagga = quagga.default. Turned out the problem remains.

Is there a fix for that?

[ericblade]

i’m not convinced that with the current structure of the worker, that there’s even any benefit to it – it just ran multiple copies of itself configured the same way, across multiple threads. A restructuring of it might perhaps run different decoders on different worker threads.

I’ve published 0.0.13, if you want to try that and see if it fixes the issue. I’m going to close this one anyway, in favor of the all-encompassing “restructuring things is really needed”, but if this persists, lmk… i didn’t see it in my quick test (i did look at the console output this time 😄 )

[ericblade]

figured it out, it’s the removal of the webpack-plugins\umd.js file that was removed as part of the upgrade to webpack from v2 to v5. i… don’t think that can be directly put back in, but i think we’ll need to study it. it would put the entire source of the quagga.js module into the factorySource variable … and that no longer exists…

maybe it can just be put back in… not sure…

… probably explains why the workers break when trying to add new readers to them, too…