An error occurred in the renderTracks（vite-vue3）

[wanglf0812]

I use the alphaTabSamplesWeb/vite-vue3 sample and try to render another track.But an error occurred in the renderTracks Method。
I have used the toRaw method to get the original object of the track. Can you give me some advice?

Uncaught DOMException: Failed to execute 'postMessage' on 'Worker': [object Array] could not be cloned.
at Proxy.renderScore (http://127.0.0.1:5173/node_modules/.vite/deps/@coderline_alphatab.js?v=583ada46:23499:18)
at Proxy.render (http://127.0.0.1:5173/node_modules/.vite/deps/@coderline_alphatab.js?v=583ada46:21571:21)
at Proxy.internalRenderTracks (http://127.0.0.1:5173/node_modules/.vite/deps/@coderline_alphatab.js?v=583ada46:21473:12)
at Proxy.renderTracks (http://127.0.0.1:5173/node_modules/.vite/deps/@coderline_alphatab.js?v=583ada46:21458:12)
at Proxy.changeTrack (http://127.0.0.1:5173/src/App.vue?t=1719932133692:38:18)
at onClick (http://127.0.0.1:5173/src/App.vue?t=1719932133692:63:39)
at callWithErrorHandling (http://127.0.0.1:5173/node_modules/.vite/deps/vue.js?v=583ada46:1659:19)
at callWithAsyncErrorHandling (http://127.0.0.1:5173/node_modules/.vite/deps/vue.js?v=583ada46:1666:17)
at HTMLButtonElement.invoker (http://127.0.0.1:5173/node_modules/.vite/deps/vue.js?v=583ada46:10299:5)

<script setup lang="ts">
import {ref, onMounted, onUnmounted,toRaw } from 'vue';
import { AlphaTabApi, Settings } from '@coderline/alphatab'

const element = ref();
const api = ref<AlphaTabApi|null>(null)
const tracks = ref();

onMounted(()=>{
  api.value = new AlphaTabApi(element.value, {
      core: {
        file: 'https://www.alphatab.net/files/canon.gp',
        fontDirectory: '/font/'
      },
      player: {
        enablePlayer: true,
        enableCursor: true,
        enableUserInteraction: true,
        soundFont: '/soundfont/sonivox.sf2'
      }
    } as Settings);

    // fill track list when the score is loaded
    api.value?.scoreLoaded.on((score) => {
      // generate a track item for all tracks of the score
      tracks.value = score.tracks;
    });
})

onUnmounted(()=>{
  api.value?.destroy();
  api.value = null;
})

function playPause() {
  api.value?.playPause();
}

function changeTrack(track:any) {
  api.value?.renderTracks([toRaw(track)]);
}
</script>

<template>
  <div>
      Hello AlphaTab!
      <button @click="playPause()">Play/Pause</button>
      <template v-for="track in tracks">
        <button @click="changeTrack(track)">{{ track.name }}</button>
      </template>
      <div ref="element"></div>
  </div>
</template>

[Danielku15]

Seems something special to Vue, similar to this problem: https://stackoverflow.com/questions/77319774/vue-3-here-maps-failed-to-execute-postmessage-on-worker-object-array-co

It seems the alphaTab API object is also a proxy. can you try getting the real object with something like toRaw(api.value) to interact with the real alphaTab object?

[wanglf0812]

Thank you very much for your answer. I used toRaw to get the real Api object based on your suggestion and it is now working properly.
toRaw(api.value)?.renderTracks([toRaw(track)])

[Danielku15]

Great to hear. 🥳