Error with FaceMesh demo using import: Module is not defined

[etekweb]

When adapting the MindAR Three.js FaceMesh demo for a Vue.js project (importing with npm), I receive the following error upon importing the script:

Uncaught ReferenceError: Module is not defined
    at Object.<anonymous> (mindar-face-three.prod.js:2:2703852)
    at 129 (mindar-face-three.prod.js:2:2703883)
    at g (mindar-face-three.prod.js:2:2705228)
    at 9487 (mindar-face-three.prod.js:2:737553)
    at g (mindar-face-three.prod.js:2:2705228)
    at 1320 (mindar-face-three.prod.js:2:695341)
    at g (mindar-face-three.prod.js:2:2705228)
    at mindar-face-three.prod.js:2:2705890
    at mindar-face-three.prod.js:2:2710478
    at node_modules/mind-ar/dist/mindar-face-three.prod.js (mindar-face-three.prod.js:2:2710482)

My code (click to reveal)

<script setup>
import 'mind-ar/dist/mindar-face-three.prod';
import { onMounted } from 'vue';

const { THREE } = window.MINDAR.FACE;
const mindarThree = new window.MINDAR.FACE.MindARThree({
  container: document.querySelector('#container'),
});
const { renderer, scene, camera } = mindarThree;
const light = new THREE.HemisphereLight(0xffffff, 0xbbbbff, 1);
scene.add(light);
const faceMesh = mindarThree.addFaceMesh();
const texture = new THREE.TextureLoader().load('./assets/canonical_face_model_uv_visualization.png');
faceMesh.material.map = texture;
faceMesh.material.transparent = true;
faceMesh.material.needsUpdate = true;
scene.add(faceMesh);
const start = async () => {
  await mindarThree.start();
  renderer.setAnimationLoop(() => {
    renderer.render(scene, camera);
  });
};

onMounted(() => {
  console.log('test');
  console.log(window.MINDAR);
  start();
});
</script>

<template>
  <div id="container" />
</template>

<style lang="scss" scoped></style>

I do not have this issue when using similar import statements for the MindAR image detection demo.

Is there something I am missing with this one?

[etekweb]

I have dug into this issue further and it appears to be related to the MindAR project being written in CommonJS instead of ESM. I am still investigating what can be done to work around this issue.

[hiukim]

Definitely would love to make it ESM compatible.

We have an issue hanging for a while. https://github.com/hiukim/mind-ar-js/issues/63 If you have any inputs or would like to create a PR