TypeError: holistic.Holistic is not a constructor on tauri

[kulame]

Please make sure that this is a bug and also refer to the troubleshooting, FAQ documentation before raising any issues.

System information (Please provide as much relevant information as possible)

• Have I written custom code (no):
• OS Platform and Distribution (windows 11):
• Programming Language and version ( typescript):
• MediaPipe version:

Describe the current behavior:

I want to integrate mediapipe into tauri

my code is

  useEffect(() => {
    const canvasCtx = canvas.current!.getContext("2d")!;
    const holistic = new Holistic({
      locateFile: (file: string) => {
        const path = `https://cdn.jsdelivr.net/npm/@mediapipe/holistic/${file}`;

        console.log(path);
        return path;
      },
    });

    console.log(holistic);

    holistic.setOptions({
      modelComplexity: 1,
      smoothLandmarks: true,
      minDetectionConfidence: 0.5,
      minTrackingConfidence: 0.5,
    });

    holistic.onResults((result: any) => {
      preload.current!.hidden = true;

      canvasCtx.save();
      canvasCtx.clearRect(0, 0, canvas.current!.width, canvas.current!.height);
      canvasCtx.drawImage(
        result.image,
        0,
        0,
        canvas.current!.width,
        canvas.current!.height
      );
      drawConnectors(canvasCtx, result.poseLandmarks, POSE_CONNECTIONS, {
        color: "#00FF00",
        lineWidth: 4,
      });
      drawLandmarks(canvasCtx, result.poseLandmarks, {
        color: "#FF0000",
        lineWidth: 2,
      });
      drawConnectors(canvasCtx, result.faceLandmarks, FACEMESH_TESSELATION, {
        color: "#C0C0C070",
        lineWidth: 1,
      });
      drawConnectors(canvasCtx, result.leftHandLandmarks, HAND_CONNECTIONS, {
        color: "#CC0000",
        lineWidth: 5,
      });
      drawLandmarks(canvasCtx, result.leftHandLandmarks, {
        color: "#00FF00",
        lineWidth: 2,
      });
      drawConnectors(canvasCtx, result.rightHandLandmarks, HAND_CONNECTIONS, {
        color: "#00CC00",
        lineWidth: 5,
      });
      drawLandmarks(canvasCtx, result.rightHandLandmarks, {
        color: "#FF0000",
        lineWidth: 2,
      });
      canvasCtx.restore();
    });

    const camera = new Camera(videoInput.current!, {
      onFrame: async () => {
        await holistic.send({ image: videoInput.current! });
      },
      width: 1280,
      height: 720,
    });
    camera.start();
    console.log(camera);

    return function cleanup() {
      holistic.close();
      camera.stop();
    };
  }, []);

it's ok on "cargo tauri dev" but it failed on "cargo tauri build"

index-812ec658.js:2980 Uncaught TypeError: holistic.Holistic is not a constructor
    at index-812ec658.js:13131:24
    at Rj (index-812ec658.js:5467:22)
    at Ik (index-812ec658.js:6794:25)
    at index-812ec658.js:6648:5
    at J2 (index-812ec658.js:501:20)
    at MessagePort.R2 (index-812ec658.js:531:13)

Describe the expected behavior: Pass the test case

[kulame]

does mediapipe support vite build?

[kuaashish]

Hi @kulame, Please refer to closed issue #3796 and try out the importing the mediapipe as mentioned in #3796(comment) However, This can be more helpful see the vite support implementation from here.

[Zxun2]

Just to piggyback off this issue, I am also currently getting a similar error on @mediapipe/face_mesh:

For context, I am using a NextJS + Electron with the help of the library Nextron. Inside FaceMeshComponent.js:

import React, {useRef, useEffect} from 'react';
import Webcam from "react-webcam"
import { FaceMesh } from "@mediapipe/face_mesh";

function FaceMeshComponent() {
    const webcamRef = useRef(null);
    const canvasRef = useRef(null);

    useEffect(() => {   
        const faceMesh = new FaceMesh({locateFile: (file) => {
            return `https://cdn.jsdelivr.net/npm/@mediapipe/face_mesh/${file}`;
        }});

        faceMesh.setOptions({
            maxNumFaces: 1,
            refineLandmarks: true,
            minDetectionConfidence: 0.5,
            minTrackingConfidence: 0.5
        });
    }, [])

   return <div>...</div>

Appreciate any help!

[google-ml-butler[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you.

[google-ml-butler[bot]]

Closing as stale. Please reopen if you'd like to work on this further.

[google-ml-butler[bot]]

Are you satisfied with the resolution of your issue? Yes No

[kuaashish]

@Zxun2, Could you please raise a fresh issue with problems you are facing to adopt mediapipe solution in the JS platform? Marking this issue as reference. Thanks!!

[simo-an]

Just to piggyback off this issue, I am also currently getting a similar error on @mediapipe/face_mesh:

For context, I am using a NextJS + Electron with the help of the library Nextron. Inside FaceMeshComponent.js:

import React, {useRef, useEffect} from 'react';
import Webcam from "react-webcam"
import { FaceMesh } from "@mediapipe/face_mesh";

function FaceMeshComponent() {
    const webcamRef = useRef(null);
    const canvasRef = useRef(null);

    useEffect(() => {   
        const faceMesh = new FaceMesh({locateFile: (file) => {
            return `https://cdn.jsdelivr.net/npm/@mediapipe/face_mesh/${file}`;
        }});

        faceMesh.setOptions({
            maxNumFaces: 1,
            refineLandmarks: true,
            minDetectionConfidence: 0.5,
            minTrackingConfidence: 0.5
        });
    }, [])

   return <div>...</div>

Appreciate any help!

Hello, I alse got the same error. Have you sloved the problem?

Thanks.

[ofekkazes]

Hi @kulame, Please refer to closed issue #3796 and try out the importing the mediapipe as mentioned in #3796(comment) However, This can be more helpful see the vite support implementation from here.

If anyone still has issues, for me it was due to the vite build system, and the source code of mediapipe not public thus could not be obfuscated. From the issues @kulame sent I could find a package that handled it with ease: vite-plugin-mediapipe

The code of my script still remained the same as in:

import { FACEMESH_TESSELATION, HAND_CONNECTIONS, Holistic, POSE_CONNECTIONS } from '@mediapipe/holistic';
const holistic = new Holistic({
    locateFile: file => {
      console.log(file)
      return `https://cdn.jsdelivr.net/npm/@mediapipe/holistic@0.5.1675471629/${file}`;
    },
  });

And I also add a vite.config.js in the root of my project that looks like this:

import { mediapipe } from 'vite-plugin-mediapipe';
import { defineConfig } from 'vite'

export default defineConfig(config => {
    return {
        plugins: [
            mediapipe({
                'holistic.js': [
                    'VERSION',
                    'POSE_CONNECTIONS',
                    'HAND_CONNECTIONS',
                    'FACEMESH_TESSELATION',
                    'Holistic'
                ]
            })
        ]
    }
});

After including the vite.config.js the build was successful and I was able to deploy the app to production.