SelfieSegmentation is not a constructor

[Exlord]

Hi, Using vuejs3+vite+ts I am getting this error Uncaught (in promise) TypeError: jle.SelfieSegmentation is not a constructor

There was a discussion here https://github.com/vitejs/vite/issues/4680

[MendyBerger]

Same issue

[wangyingjie123]

same issue. How to solve?

[gaikwadrahul8]

Hi, @Exlord

Apologize for the delayed response and Could you please help us with your codepen-example or Github repo link to replicate same issue from our end ?

We have selfie_segmentation_mediapipe and selfie_segmentation_tfjs so which one are you trying to use ? If you're using selfie_segmentation_mediapipe then please refer this issue https://github.com/google/mediapipe/issues/2883

If possible please help us with steps to reproduce the same issue from our end to dig more into your issue. Thank you!

[github-actions[bot]]

This issue has been marked stale because it has no recent activity since 7 days. It will be closed if no further activity occurs. Thank you.

[Limuyang1013]

Also meet this when i use @mediapipe/selfie_segmentation to segment image

TypeError: (0 , $csb__tation.SelfieSegmentation) is not a constructor

in codesanbox env, so i have to set runtime to "tsjs"

[Bersaelor]

The problem seems to be that @mediapipe/* packages are obfuscated and rollup (which vite uses) doesn't seem to be able to handle it.

In my case the error is:

index-a9b38343.js:1 Uncaught (in promise) TypeError: Ik.FaceMesh is not a constructor

caused by @mediapipe/face_mesh not being built into the js properly.

I found this thread in the vite issues page:

Rollup CommonJS plugin can't work with obfuscated packages because it relies on static analysis to determine its exports.

[gaikwadrahul8]

Hi, @Exlord

I apologize for the delayed response. After reviewing the issue mentioned in @Bersaelor comment, it appears that the issue is with the MediaPipepackage. Please refer to this comment for more details. I would recommend posting this issue in the MediaPipe repo so that the MediaPipe team can address it,please feel free to close this issue.

If Am I missing something here please let me know ? Thank you!

[Bersaelor]

Hi, @Exlord

I apologize for the delayed response. After reviewing the issue mentioned in @Bersaelor comment, it appears that the issue is with the MediaPipepackage. Please refer to this comment for more details. I would recommend posting this issue in the MediaPipe repo so that the MediaPipe team can address it,please feel free to close this issue.

If Am I missing something here please let me know ? Thank you!

Yup, you're correct, it's not about the tfjs repo. Sorry for raising it here, I had started importing tfjs but really mostly use mediapipe.

[github-actions[bot]]

This issue has been marked stale because it has no recent activity since 7 days. It will be closed if no further activity occurs. Thank you.

[github-actions[bot]]

This issue was closed due to lack of activity after being marked stale for past 7 days.

[google-ml-butler[bot]]

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

[Exlord]

I found the solution and I am putting it here just as a reference for any one who crosses path here.

function mediapipe_workaround() {
  return {
    name: 'mediapipe_workaround',
    load(id: string) {
      if (basename(id) === 'selfie_segmentation.js') {
        let code = fs.readFileSync(id, 'utf-8');
        code += 'exports.SelfieSegmentation = SelfieSegmentation;';
        return { code };
      } else {
        return null;
      }
    },
  };
}

vite.config

...
    build: {
      rollupOptions: {
        plugins: [mediapipe_workaround()],
      },
    }

[rohan-kumawat-ril]

@Exlord will building with webpack resolve this issue ?

[Exlord]

@rohan-kumawat-ril I don't know , haven't tried it with webpack

[rohan-kumawat-ril]

@Exlord your workaround work for me , can we use in production build

[Exlord]

Yes, this is a build time enchantment, its perfectly safe for production, I am using it in production.