Issues integrating AlphaTab in Vite/React application - Iframe workaround successful

[vapingpost]

Hi everyone, I've spent significant time trying to integrate AlphaTab into a Vite + React + TypeScript application and encountered several persistent issues. I wanted to share my experience in case it helps others or if you have suggestions.

Environment:

• Vite 5.x
  

• React 18.3.1
  

• TypeScript
  

• AlphaTab 1.6.2 (installed via npm @coderline/alphatab)
  

Issues encountered:

Worker/Worklet loading errors: Despite trying multiple Vite configuration approaches (including vite-plugin-static-copy, manual public folder placement, and custom worker configurations), AlphaTab consistently failed to load its worker and worklet files properly.

• CORS issues: Even with files in the public directory, we got CORS-related errors when AlphaTab tried to load its internal resources.
• SoundFont loading problems: Various "Invalid Soundfont2 file" errors, even with properly formatted SF2 files hosted on our Supabase storage.

Build vs Dev inconsistencies:

Some approaches worked in dev mode but failed in production builds.

Solution that worked

We created a standalone HTML page (guitar-pro-player.html) that loads AlphaTab via CDN:
<script src="https://cdn.jsdelivr.net/npm/@coderline/alphatab@latest/dist/alphaTab.js"></script>

Then we embedded this page in our React app using an iframe with postMessage communication for controls. This approach works perfectly and audio plays correctly.

Question: Is there a recommended way to integrate AlphaTab in modern Vite/React applications without using an iframe? Are there specific Vite configurations or AlphaTab initialization options we should use?

Thank you for this amazing library!

[Danielku15]

Have you looked into the following links?

• https://www.alphatab.net/docs/getting-started/installation-vite
• https://github.com/CoderLine/alphaTabSamplesWeb/tree/main/src/vite-react

The problems you mention indicate you have missed those references.