Node JS and React problems

[matevzsenlab]

I tried using AlphaTab with React first and after trying code from this example: https://codesandbox.io/s/kpy7o. I've given up on it. Code from the example worked if I cloned it and ran it locally, but if I tried the same code with my existing project which runs newer react and AlphaTab version I got a crash in Chrome (no errors shown, just "Aw Snap" crash on Chrome).
After that I tried using AlphaTab in Node JS. I was able to load the scores, displaying score title, artist, tracks...but when using renderer functions like (partialLayoutFinished, partialRenderFinished...) copied from docs, renderResult was always null. I don't know if it's a bug or am I doing something completely wrong.

[Danielku15]

I am not a deep expert in React but I think the problem might be the fact you are using useEffect. According to here useEffect without second parameter will run on every render. You will be re-creating alphaTab instances on every render instead of only on the initial render.

It is less a alphaTab problem than rather using React correctly. We are using Docusaurus for the alphaTab website and there we also use React: https://github.com/CoderLine/alphaTabWebsite/blob/develop/src/components/AlphaTab/index.tsx#L13 We might not be doing all the things like a proper full React app would be doing so it is not a good reference how to use alphaTab fully in React. It is more a proof that generally things are working fine.

[matevzsenlab]

Thank you for such a quick reply. I was finally able to get something to work on my project. I actually had the code in similar state a few days ago but tabs weren't playing and changing sound font from the example in the link I sent helped.
I still got some problems with importing alphaTab. It worked if I imported with new alphaTab.AlphaTabApi, having tag in the index.html, but I got some font errors if I imported it like this:
import * as alphaTab from "@coderline/alphatab"; . . . new alphaTab.AlphaTabApi

[Danielku15]

If you share a Git Repo with your work I could have a closer look. A first guess from those logs would be that your server side part (express?) is not serving some of the file formats correctly. You could inspect the Network Tab in your browser to check if those files are correctly served and the data is as on disk. As Chrome is already claiming that it cannot decode the font files this is a good indicator. Similarly the SoundFont loading might fail due to similar reasons.

[matevzjecl]

I am commenting from another account, but here is the repo with this error.
https://github.com/matevzjecl/alphatab-react-font-error
If you go to src/AlphaTab.tsx you can see there is a commented code that is working, but it's not really a "react way" to call a function from a window (script tag). Maybe I am doing some other thing wrong in the code.

[Danielku15]

Sorry for the delayed answer. I was quite busy lately and could not focus much on things happening here. As a follow up:

It seems your topic might relate to following references:

1. https://alphatab.net/docs/getting-started/installation-web#bundling
2. ☂️ Improve WebPack Support #759

As far I can see you are using react-scripts and this by default uses WebPack for bundling. We don't support yet well the bundling of alphaTab without further actions needed on developer side. It is hard to provide an out-of-the box solution because WebPack (and also other bundlers) have rather terrible support of Web Workers and Audio Worklets but they are a key part of alphaTab. You might want to look into the (WIP) samples over here to learn how to configure WebPack correctly (independent from React apps):

https://github.com/CoderLine/alphaTabSamplesWeb/tree/feature/webpack/src

Then you will need to customize the WebPack configuration of your application according to the examples above. On how to do that, you might consult various articles around React apps like:

• https://marmelab.com/blog/2021/07/22/cra-webpack-no-eject.html
• https://medium.com/@ryoldash/customize-webpack-config-of-react-app-created-with-create-react-app-7a78c7849edc

I am regularly thinking on how I could improve the situation within bundler scenarios but haven't really found a good solution yet.

[matevzjecl]

No problem. Thanks for replying again. I actually found a solution recently. I noticed that creating AlphaTabApi the way I described it fontDirectory and scriptFile were trying to get the files from localhost. I had to change it manually before API initialization.
core: { fontDirectory: 'https://cdn.jsdelivr.net/npm/@coderline/alphatab@latest/dist/font/', scriptFile: 'https://cdn.jsdelivr.net/npm/@coderline/alphatab@latest/dist/alphaTab.min.js' },

[Danielku15]

This way you might not benefit from any bundling and might load the user double. The NPM package will ship and be bundled into your application by WebPack as you are importing it into your TSX files. With providing fontDirectory and scriptFile on JSDeliver the browser will load additional resources from this CDN. But normally you would want to serve alphaTab and its dependencies as part of your application itself (bundled).

And this is where the configurations above come into place.