Error: Zxing functions does not exists. React QR Scanning App

Question

I am trying add a qr code scanning functionality to my react app. I am using @zxing(https://www.npmjs.com/package/@zxing/browser & https://www.npmjs.com/package/@zxing/library) packages.

Following the readme, here's my js code. I have hosted the application on aws so its SSL covered. But I can't seem to figure out the issue. I have read the git repo of both and the functions do exists(https://github.com/zxing-js/browser/tree/master/src/readers)

import React, { useState, useEffect } from "react";

import {
  NotFoundException,
  ChecksumException,
  FormatException
} from "@zxing/library";

import { BrowserQRCodeReader, BrowserCodeReader } from '@zxing/browser';

export default function() {

  var qrCodeReader = null;
  var codeReader = null;
  var sourceSelect = null;

  console.log("ZXing code reader initialized");

  useEffect(() => {

    codeReader = new BrowserCodeReader();
    qrCodeReader = new BrowserQRCodeReader();

    console.log(codeReader.listVideoInputDevices()); // ISSUE: RETURNS -> listVideoInputDevices() is not a fuction
    console.log(qrCodeReader.listVideoInputDevices());  // ISSUE: RETURNS -> listVideoInputDevices() is not a fuction

    
    console.log("Code Reader", codeReader); // ISSUE: SEE IMAGE BELOW 
    console.log("QR Code Reader", qrCodeReader); // ISSUE: SEE IMAGE BELOW 
    }, []);

Answer 1

Instead of using the import try using:

const zxing = require('zxing-js/library');