Is the webpack plugin working for NextJS?

[EuroWhisper]

Hello!

Thank you for all your hard work on this fantastic piece of software. :) I was using it with great success in a Vite application. However, I needed to switch to NextJS. I noticed a lot of lag in the audio and with the player's cursor jumping. I also noticed the following error in the console (even though I'm using the suggested Next config with the webpack plugin):
:3001/_next/static/chunks/_app-pages-browser_node_modules_coderline_alphatab_dist_alphaTab_worklet_mjs.js:726 Uncaught ReferenceError: _N_E is not defined

So I decided to simplify things by cloning your NextJS example from here and running it to see if everything is fine. But I see the same aforementioned error, despite no audio lag or cursor lag.

Given the error in both your example and my application and that my application lags (it has a lot of additional page elements etc) but your simple example one does not.. Does this mean that the worker is not loading/"working" and that the main thread is being used due to the error with the worker (hence the lag)? As said lag seems to worsen when there's more contents on the page (though this issue did not occur when using Vite)

Any insight would be greatly appreciated, thanks!

[Danielku15]

Yes, generally it is working but there are some findings on the latest releases and what you report.

1. Performance

Did you do a performance profile of your app? Maybe your code has some other React/NextJS related problems. one good example is the problem we also had on the playground: CoderLine/alphaTabWebsite#145

With the new "trigger event handler on registration" adaption added in 1.6.2, it becomes more problematic to register events wrongly in frameworks like React/NextJS. We had constant re-renders and re-registrations due to events being registered (which triggered some logic, causing again re-renders). This became obvious quite quickly doing some profiling in the browser.

2. Browser error.

I'm not sure when this problem started but it seems WebPack had some changes under the hood which we need to handle. In NextJS there seem to be some default library options active assigning the exports to some global variable. But this global variable is nowhere declared, causing an error as Audio Worklets are running as strict. Will soon release a 1.6.3 with a fix for this.

#2299