mediapipe: undefined is not a constructor

I also get the same issues with Pose. Have changed my initialization to

const pose = new Pose({
  locateFile: (file) => {
    return `node_modules/@mediapipe/pose/${file}`;
  }
});

but I get the same undefined is not a constructor.

I don’t see any examples of importing from the npm-installed libraries anywhere… not sure if I’m doing this right?

Hi! Can you try using “@mediapipe/face_detection”: “^0.3” in your dependencies? The package.json I was using was in shambles. Also, to save you time, if you didn’t already see this, you’ll need to change locateFile to grab the files from your npm_modules. Something like:

   faceDetection = new FaceDetection({
      locateFile: (path, base) => {
        return `base/node_modules/@mediapipe/face_detection/${path}`;
      }
    });

It’s great that the types are included in the package, but it required a lot of troubleshooting and a weird workaround to get them to actually work. The window props are perfectly functional, but if I try to import the equivalent values, I get errors like “undefined is not a function” or “Holistic is not a constructor” even though the types say it should be fine. The workaround is to grab the functional window props and reassign the types manually.

// load window scoped stuff that actually works
import '@mediapipe/holistic/holistic'
import '@mediapipe/drawing_utils'

// load types and function signatures
import {
  drawConnectors as mpDrawConnectors, 
  drawLandmarks as mpDrawLandmarks,
  LandmarkConnectionArray
} from '@mediapipe/drawing_utils'
import {
  Results as MPResults,
  Holistic as MPHolistic 
} from '@mediapipe/holistic/holistic'

// assign types to window props
const win = window as any
const MPHolistic = win.Holistic as MPHolistic
const drawConnectors = win.drawConnectors as typeof mpDrawConnectors
const drawLandmarks = win.drawLandmarks as typeof mpDrawLandmarks
const HAND_CONNECTIONS = win.HAND_CONNECTIONS as LandmarkConnectionArray
const POSE_CONNECTIONS = win.POSE_CONNECTIONS as LandmarkConnectionArray
const FACEMESH_TESSELATION = win.FACEMESH_TESSELATION as LandmarkConnectionArray

I am getting the same issue with the pose, has anyone found any solution for it?

I experienced the same thing where it works fine in Vite’s dev server but not after building for both hands and camera_utils. Using this as a workaround:

import { Hands as _Hands } from '@mediapipe/hands';
const Hands = _Hands || window.Hands;
const hands = new Hands({ locateFile: (file) => { `https://cdn.jsdelivr.net/npm/@mediapipe/hands/${file}` });

Might have something to do with the package.json referencing "main": "hands.js" which contains no actual exports statements. index.d.tsseems to have the exports but I’m not familiar with how that works.

And, unrelated to this issue, I’d prefer if the library somehow made these files available and remove the dependance on a CDN, but maybe that violates the license?

hand_landmark_full.tflite
hands_solution_packed_assets_loader.js
hands_solution_simd_wasm_bin.js
hands.binarypb
hands_solution_packed_assets.data
hands_solution_simd_wasm_bin.wasm

import { FaceDetection } from '@mediapipe/face_detection'; let faceDetection = new FaceDetection();

i also try import { FaceDetection } from '@mediapipe/face_detection/face_detection'; as they did in this

is there anything wrong?