undefined is not a constructor

[FladioArmandika]

i use npm install @mediapipe/face_detection

and import
import { FaceDetection } from '@mediapipe/face_detection' and
import { FaceDetection } from '@mediapipe/face_detection/face_detection';

and do
let faceDetection = new FaceDetection();

but it tells me undefined is not a constructor (evaluating 'new _face_detection.FaceDetection()')

would you help me? or give some example for implementing it?

[sgowroji]

Hi @FladioArmandika, Could you please share your code. Assuming its more an import error, Please recheck your imports. Thanks!

[FladioArmandika]

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?

[mhays-google]

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}`;
      }
    });

[sgowroji]

Hi @FladioArmandika, Have a look at the above comment. Thanks!

[FladioArmandika]

TypeError: undefined is not a constructor (evaluating 'new _face_detection.FaceDetection')

I change to ^0.3 and change the locateFile

but still got the same error like before :(

[DanielWFrancis]

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?

[jomariya23156]

I'm getting the same issues here with pose. Has anyone fixed this?

[mhays-google]

This almost certainly means that you have not successfully loaded the wasm.js file. You can see whether or not this happens by looking at the network tab. I am surprised that the following does not work. const pose = new Pose({ locateFile: (file) => { return ***@***.***/pose/${file}`; } }); This is how some of our internal teams have set this up. Make sure that when you are running your web server, that ***@***.***/pose/ ${file}` actually gets you the files you need. e.g., Angular might serve these files from `static`. I recognize that we have a lot of npm users out there, and I will see about putting together some examples.

…

On Wed, Jul 28, 2021 at 7:13 PM Ariya Sontrapornpol < ***@***.***> wrote: I'm getting the same issues here with pose. Has anyone fixed this? — You are receiving this because you were assigned. Reply to this email directly, view it on GitHub <#1976 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AHKQBFKVELLEMT47RYADXZ3T2C2M3ANCNFSM44CCMJPA> .

[google-ml-butler]

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.

[sgowroji]

Hi @FladioArmandika, Were you able to load the wasm.js files as mentioned in the above comment. Thanks!

[google-ml-butler]

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]

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

[google-ml-butler]

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

[nandwalritik]

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

[nihirv]

Having this issue with face_mesh

[Jonathan-J8]

I've the same issue with face_mesh (version ^0.4.1633559619)
I use sveltekit. It log this warning :

@mediapipe/face_mesh doesn't appear to be written in CJS, but also doesn't appear to be a valid ES module (i.e. it doesn't have "type": "module" or an .mjs extension for the entry point). Please contact the package author to fix.

In dev mode all things work but in production this appear :

Uncaught (in promise) TypeError: Ip.FaceMesh is not a constructor

Maybe all of this come from the fact that the source code is an IIFE.
The only way I did succed to use it in production was to add the script globally as in the exemple
https://google.github.io/mediapipe/solutions/face_mesh.html

[positlabs]

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

[DaveSeidman]

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

[MadeWithStone]

You can use the updated @mediapipe/tasks-vision api which works properly in vite locally and in production. Over at Kinetix ML we have it working locally with vite and in production with vercel deploy after facing similar issues with the face landmarks api. You can checkout our implementation here https://github.com/Kinetix-ML/kml-pipe-ts/blob/main/src/operations/faceMeshDetect.ts

[sduoooh]

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:我遇到了同样的事情，它在 Vite 的开发服务器中运行良好，但在为双手和camera_utils构建后就没有了。使用此解决方法：

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.可能与引用 “main”： “hands.js” 的package.json有关，该 不包含实际的 exports 语句。index.d.ts似乎有导出功能，但我不熟悉它是如何工作的。

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?而且，与此问题无关，我更愿意图书馆以某种方式提供这些文件并消除对 CDN 的依赖，但也许这违反了许可证？

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

Thanks! It works on my case.

I use Vue with Vite. Works well on dev but got '"Hands" is not a constructor' on preview after build.
When I edit my vite.config.js file like this:

import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  build: {
    commonjsOptions: { include: [] },
  },
  optimizeDeps: {
    disabled: false,
  },
});

It put the error '"Hands" is not exported by hand.js'.
So I agree your opinion, the question maybe is the packing of that lib.

By the way, there has a same issue on Vite: same issue on Vite.