react, How do I use face-api as a plain javascript function inside react to detect face from photos?

Question

I'm working on a react project. Where my component will call a JavaScript function(defined in another file) with the image parameter and then my Javascript function which contains face-api.js code will determine the face from image and console the result of face detection box dimensions.

First I tried it inside a react component it worked. But now I'm trying to make it as plain JavaScript module for my other react project but it gives me error

Here is the working the react component for face detection with face-api

FaceRecognition.js

import React, { useState, useEffect, useRef } from "react";
import * as faceapi from "face-api.js";
import Img from "../assets/mFace.jpg";
import './App.css';

const PhotoFaceDetection = () => {
  const [initializing, setInitializing] = useState(false);
  const [image, setImage] = useState(Img);
  const canvasRef = useRef();
  const imageRef = useRef();

  useEffect(() => {
    const loadModels = async () => {
      const MODEL_URL = process.env.PUBLIC_URL + "/models";
      setInitializing(true);
      Promise.all([
        faceapi.nets.tinyFaceDetector.loadFromUri(MODEL_URL),
        faceapi.nets.faceLandmark68Net.loadFromUri(MODEL_URL),
        faceapi.nets.faceRecognitionNet.loadFromUri(MODEL_URL),
        faceapi.nets.faceExpressionNet.loadFromUri(MODEL_URL)
      ])
        .then(console.log("success", MODEL_URL)).then(handleImageClick)
        .catch((e) => console.error(e));
    };
    loadModels();
  }, []);

  const handleImageClick = async () => {
    
      if (initializing) {
        setInitializing(false);
      }
      canvasRef.current.innerHTML = faceapi.createCanvasFromMedia(
        imageRef.current
      );
      const displaySize = {
        width: 500,
        height: 350
      };
      faceapi.matchDimensions(canvasRef.current, displaySize);
      const detections = await faceapi
        .detectSingleFace(imageRef.current, new faceapi.TinyFaceDetectorOptions())
       
      const resizeDetections = faceapi.resizeResults(detections, displaySize);
      canvasRef.current
        .getContext("2d")
        .clearRect(0, 0, displaySize.width, displaySize.height);
      faceapi.draw.drawDetections(canvasRef.current, resizeDetections);
      console.log(`Width ${detections.box._width} and Height ${detections.box._height}`);
    
  };

  return (
    <div className="App">
      <span>{initializing ? "Initializing" : "Ready"}</span>
      <div className="display-flex justify-content-center">
        <img ref={imageRef} src={image} alt="face" />
        <canvas ref={canvasRef} className="position-absolute" />
      </div>
    </div>
  );
};

export default PhotoFaceDetection;

Not working raising error: Below is my plain JavaScript function which I'm trying to implement from above component.

import * as faceapi from "face-api.js";

const faceDetector = (image) => {
    const imageRef = image;


    const handleImage = async () => {
        const detections = await faceapi
            .detectSingleFace(imageRef, new faceapi.TinyFaceDetectorOptions())
        console.log(`Width ${detections.box._width} and Height ${detections.box._height}`);
    }

    const loadModels = async () => {
        const MODEL_URL = process.env.PUBLIC_URL + "/models";
        Promise.all([
            faceapi.nets.tinyFaceDetector.loadFromUri(MODEL_URL),
            faceapi.nets.faceLandmark68Net.loadFromUri(MODEL_URL),
            faceapi.nets.faceRecognitionNet.loadFromUri(MODEL_URL),
            faceapi.nets.faceExpressionNet.loadFromUri(MODEL_URL)
        ])
            .then(handleImage)
            .catch((e) => console.error(e));
    };
    loadModels();


}



export {faceDetector}

Here is the screenshot of the errror I am getting.