Vue+Vite+Vite plugin does not work

[dreamevilgf]

Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

Hi, I tried to use version 1.3 with vite plugin and encoutred with issue on init Api in component.

Get message in terminal

Sourcemap for "D:/Job/Test/my-vue-app/node_modules/@coderline/alphatab/dist/alphaTab.worker.mjs" points to missing source files
Sourcemap for "D:/Job/Test/my-vue-app/node_modules/@coderline/alphatab/dist/alphaTab.core.mjs" points to missing source files

And get error message in browser

downloadable font: rejected by sanitizer (font-family: "alphaTab" style:normal weight:400 stretch:100 src index:1) source: http://localhost:5173/node_modules/.vite/deps/font/Bravura.woff
downloadable font: rejected by sanitizer (font-family: "alphaTab" style:normal weight:400 stretch:100 src index:2) source: http://localhost:5173/node_modules/.vite/deps/font/Bravura.otf 
HelloWorld.vue:24 [AlphaTab][Font] [alphaTab] Loading Failed, rendering cannot start DOMException: A network error occurred.
HelloWorld.vue:24 [AlphaTab][Font] [alphaTab] Loading Failed, rendering cannot start Font not available

I would be very grateful if you could tell me what I'm doing wrong

Expected Behavior

AlphaTabApi init player on web page

Steps To Reproduce

1. Install empty vue+vite app
   yarn create vite my-vue-app --template vue
2. Add "@coderline/alphatab": "^1.3.0" to package.json and install it
3. Add vite plugin in vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import {alphaTab} from "@coderline/alphatab/vite";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
      vue(),
      alphaTab()
  ],
})

4. Added code to component in src/components/HelloWorld.vue

<template>
  <h1>Test</h1>

  <div ref="alphaTab" data-tex="true">
    \title "Hello alphaTab"
    .
    :4 0.6 1.6 3.6 0.5 2.5 3.5 0.4 2.4 |
    3.4 0.3 2.3 0.2 1.2 3.2 0.1 1.1 |
    3.1.1
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref, watch } from "vue"
import { AlphaTabApi } from "@coderline/alphatab"

const alphaTab = ref<HTMLElement | null>(null)
const api = ref<AlphaTabApi | null>(null)


onMounted(async () => {
  console.log(alphaTab.value)
  if(alphaTab.value) {
    api.value = new AlphaTabApi(alphaTab.value!, {})
  }
})

</script>
<style scoped>

</style>

Link to jsFiddle, CodePen, Project

No response

Found in Version

1.3-alpha

Platform

Web

Environment

- Firefox Browser Developer 127.0b2:

Anything else?

No response

[Danielku15]

Hi @dreamevilg

1. Source Maps

This problem is a bit unfortunate but does not cause the problem of alphaTab not showing up. We actually should not ship the source maps at all. They point back to the original typescript codebase from which we compiled. These sources are not shipped (on purpose) but leading to warnings in the Vite tooling. I added #1503 as separate bug for that.

2. Not working alphaTab

The problem in your setup is, that with the defaults you point to the wrong URL where alphaTab can find its font files. The documentation is missing this important detail and I'll have to extend this info. The plugin cannot inject such general alphaTab runtime settings yet, but it would be a good idea to also change these defaults. Until then you have to specify the path to the font directory manually:

https://github.com/CoderLine/alphaTabSamplesWeb/blob/main/src/vite-vue/src/App.vue#L12

<template>
  <h1>Test</h1>

  <div ref="alphaTab" data-tex="true">
    \title "Hello alphaTab"
    .
    :4 0.6 1.6 3.6 0.5 2.5 3.5 0.4 2.4 |
    3.4 0.3 2.3 0.2 1.2 3.2 0.1 1.1 |
    3.1.1
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref, watch } from "vue"
import { AlphaTabApi } from "@coderline/alphatab"

const alphaTab = ref<HTMLElement | null>(null)
const api = ref<AlphaTabApi | null>(null)


onMounted(async () => {
  console.log(alphaTab.value)
  if(alphaTab.value) {
    api.value = new AlphaTabApi(alphaTab.value!, {
+     core: {
+       fontDirectory: '/font/'
+     }
    })
  }
})

</script>
<style scoped>

</style>

[dreamevilgf]

I added information about the fontDirectory and everything worked, thanks!