Unable to use MindAR Face Tracking in mind-ar@1.2.1

Version

1.2.1

Reproduction link

ThreeJS: https://hiukim.github.io/mind-ar-js-doc/face-tracking-samples/three.html AFrame: https://hiukim.github.io/mind-ar-js-doc/face-tracking-samples/minimal.html Note: need to edit to use version 1.2.1 version of MindAR

Steps to reproduce

Load up the website and give permission to use camera.
Check console.

What is expected?

Both ThreeJS version and AFrame version should be able to start up MindAR Face Tracking sample without issue.

What is actually happening?

For ThreeJS

Received error Uncaught (in promise) TypeError: pB.FaceMesh is not a constructor when starting MindAR system for face tracking in ThreeJS version.

Uncaught (in promise) TypeError: pB.FaceMesh is not a constructor
    uB mind-ar_dist_mindar-face-three__prod__js.js:4359
    setup mind-ar_dist_mindar-face-three__prod__js.js:8271
    _startAR mind-ar_dist_mindar-face-three__prod__js.js:8446
    _startAR mind-ar_dist_mindar-face-three__prod__js.js:8407
    start mind-ar_dist_mindar-face-three__prod__js.js:8360
    startAnimateScene MindArFaceScene.composable.ts:134
    useMindArFaceScene MindArFaceScene.composable.ts:42
    callWithErrorHandling chunk-3NMN3MUW.js:1580
    callWithAsyncErrorHandling chunk-3NMN3MUW.js:1588
    job chunk-3NMN3MUW.js:2963
    triggerEffect chunk-3NMN3MUW.js:589
    triggerEffects chunk-3NMN3MUW.js:579
    triggerRefValue chunk-3NMN3MUW.js:1174
    effect chunk-3NMN3MUW.js:1304
    triggerEffect chunk-3NMN3MUW.js:589
    triggerEffects chunk-3NMN3MUW.js:574
    triggerRefValue chunk-3NMN3MUW.js:1174
    effect chunk-3NMN3MUW.js:1304
    triggerEffect chunk-3NMN3MUW.js:589
    triggerEffects chunk-3NMN3MUW.js:574
    triggerRefValue chunk-3NMN3MUW.js:1174
    set value chunk-3NMN3MUW.js:1218
    createSceneContainer MindArFaceScene.composable.ts:79
    onUpdate MindArFaceScene.composable.ts:106
    callWithErrorHandling chunk-3NMN3MUW.js:1580
    callWithAsyncErrorHandling chunk-3NMN3MUW.js:1588
    job chunk-3NMN3MUW.js:2963
    callWithErrorHandling chunk-3NMN3MUW.js:1580
    flushJobs chunk-3NMN3MUW.js:1767
    promise callback*queueFlush chunk-3NMN3MUW.js:1683
    queueJob chunk-3NMN3MUW.js:1677
    scheduler chunk-3NMN3MUW.js:2985
    triggerEffect chunk-3NMN3MUW.js:589
    triggerEffects chunk-3NMN3MUW.js:579
    triggerRefValue chunk-3NMN3MUW.js:1174
[mind-ar_dist_mindar-face-three__prod__js.js:4359:48](https://localhost:5173/node_modules/.vite/deps/mind-ar_dist_mindar-face-three__prod__js.js?v=5ffc272d)

For AFrame

Uncaught SyntaxError: return not in functionmindar-face-aframe.prod.js:1:1647

Investigation

This issue is occurred in bundle script, where the import script below is compiled into wrong code.

For ThreeJS

Import script: https://github.com/hiukim/mind-ar-js/blob/41e3e264c6861c45512364d724c620412cc67180/src/face-target/face-mesh-helper.js#L1

Compiled code:

var pB = {}; // line 2, the pB is an empty object

// ...

// line 4311
    this.detectResolve = null, this.faceMesh = new pB.FaceMesh({ locateFile: (U) => `https://cdn.jsdelivr.net/npm/@mediapipe/face_mesh@0.4/${U}` }), this.faceMesh.setOptions({

For AFrame

The bundled code having incorrect code, where it has return keyword at the root level (outside of a function).

// code...
var M = new E; // at root level
return Q.prototype.F = function(K) {
// more code...

Solution

~~I found out that vite production config has specified external package, but missing some of the other external packages.~~

~~Including @mediapipe/face_mesh in external packages fixed the issue.~~

Edited Turns out it's @mediapipe/face_mesh package caused the issue, it is a IIFE package, but compiler seems to not handling it correctly.

For ThreeJS

The fix is revert changes made in face-mesh-helper.js.

Revert the import back to original import method as mentioned in this commit https://github.com/hiukim/mind-ar-js/commit/c747438a1bf7f8743aed04a996e8dc1cedb9a1ea .

https://github.com/hiukim/mind-ar-js/blob/41e3e264c6861c45512364d724c620412cc67180/src/face-target/face-mesh-helper.js#L1

For AFrame

I have not found a fix for AFrame compiled code.

hiukim / mind-ar-js