I have been trying to build and use the dist, but I'm getting this error.

[SuharshTyagii]

I'm basically trying to import the needed functions from the dist directory in my code like this: import { MindARThree } from './../static/dist/mindar-face-three.prod.js';

where I built the 'mindar-face-three.prod.js' with:

npm run build

I'm getting this error: This dependency was not found:

• fs in dist/controller.9e922ea9.js

I have tried working with the npm mind-ar package, but they rely on importmap, which I haven't been able to get to work in Vue/Nuxt 2. Any other way please ?

[SuharshTyagii]

I got this to work in Vue 3. But again encountering some other errors. This is my App.vue code:-

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <button @click="start">START</button>
  <div id="containermind">yay</div>
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
// import 'aframe';
import { MindARThree } from 'mind-ar/dist/mindar-face-three.prod.js';
import * as THREE from 'three';

console.log(MindARThree);
export default {
  name: 'App',
  data() {
    return {
      mindarThree: null,
      renderer: null,
      scene: null,
      camera: null
    }
  },
  components: {
    HelloWorld
  },
  async mounted() {
    await this.initMindAr();
    // await this.start();
  },
  methods: {
    async initMindAr() {
      console.log('initMindAr');
      this.mindarThree = new MindARThree({
        container: document.querySelector("#containermind"),
      });
      const { renderer, scene, camera } = this.mindarThree;
      this.renderer = renderer;
      this.scene = scene;
      this.camera = camera;
      const anchor = this.mindarThree.addAnchor(1);
      const geometry = new THREE.SphereGeometry(0.1, 32, 16);
      const material = new THREE.MeshBasicMaterial({ color: 0x00ffff, transparent: true, opacity: 0.5 });
      const sphere = new THREE.Mesh(geometry, material);
      anchor.group.add(sphere);
    },
    async start () {
      await this.mindarThree.start();
      this.renderer.setAnimationLoop(() => {
        this.renderer.render(scene, camera);
      });
    }

  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Here I'm getting the following error:

[hiukim]

works in a create-react-app: https://github.com/hiukim/mind-ar-js-react

[wuiyang]

I have not test this in Vue's Options API, but in Composition API, you need to markRaw on MindARThree instance to prevent Vue's reactivity framework converting the object (and its properties value) to proxy.

reference: https://vuejs.org/api/reactivity-advanced.html#markraw

import { markRaw } from "vue";
// code...
    async initMindAr() {
      console.log('initMindAr');
      this.mindarThree = markRaw(new MindARThree({
        container: document.querySelector("#containermind"),
      }));
      const { renderer, scene, camera } = this.mindarThree;
      this.renderer = markRaw(renderer); // need to markRaw before you assign them to data
      this.scene = markRaw(scene);
      this.camera = markRaw(camera);
      const anchor = this.mindarThree.addAnchor(1);
      const geometry = new THREE.SphereGeometry(0.1, 32, 16);
      const material = new THREE.MeshBasicMaterial({ color: 0x00ffff, transparent: true, opacity: 0.5 });
      const sphere = new THREE.Mesh(geometry, material);
      anchor.group.add(sphere);
    },