Problem while integrating with Next-js

[juliandevnguitar]

I recently discover the amazing work you are doing with alphaTab and i wanted to give it a try to integrate with an app i'm developing. I'm using Nextjs as framework, and i encounter a problem while trying to integrate the alphaTabWebpack Plugin. I tried to push the pluging to the webpack config like this:
import { AlphaTabWebPackPlugin } from '@coderline/alphatab/webpack';

const nextConfig = {
webpack: (config) => {
config.plugins.push(new AlphaTabWebPackPlugin());
return config;
}
};

export default nextConfig;

. But i got this error : Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'webpack' imported from C:\Users\julia\Desktop\academia\node_modules@coderline\alphatab\dist\alphaTab.webpack.mjs
at packageResolve (node:internal/modules/esm/resolve:844:9)
at moduleResolve (node:internal/modules/esm/resolve:901:20)
at defaultResolve (node:internal/modules/esm/resolve:1121:11)
at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:396:12)
at ModuleLoader.resolve (node:internal/modules/esm/loader:365:25)
at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:240:38)
at ModuleWrap. (node:internal/modules/esm/module_job:85:39)
at link (node:internal/modules/esm/module_job:84:36) {
code: 'ERR_MODULE_NOT_FOUND'
}
I thing the problem is that Next js works with webpack internally a doesn't expose the webpack module on the node_modules folder, which the usual location of the module. So when the plug in tries to import webpack it fails. I don´t know what to do next. If you could help me or guide me somehow would be awesome!

[Danielku15]

I gave things a small look and I'm sorry to say: we currently cannot not support Next.js there are too many things on how they compile and bundle.

The Webpack import error is just the first hurdle but the problems go deeper after that. For now I have there two main findings:

1. Even installing webpack separately will result in 2 separate "webpacks". We use some special plugin aspects (e.g. serialization and chunk loading) of WebPack and the nexjs bundling makes them inaccessible for us. These aspects are also not part of the main public facing API of WebPack.
2. client side rendering would need to be used.

While I could take some more things in our own hands in WebPack to reduce the dependencies, the key problem lies in the hidden makeSerializable.

I'm not sure if it is possible to support NextJS without adaptions in webpack and NextJS. For now I added https://github.com/orgs/CoderLine/projects/12?pane=issue&itemId=65623529 as a future work item to support Next.js. I'll have to reach out to both framework authors to expose the relevant bits for us.

[juliandevnguitar]

Thank you so much for the response. I have decided to try the vite/react framework to incorporate alphaTab and its working really good. I'm gonna deploy the alphatab as a separate microservice and plug it into my existing app via an iframe element for now. I think for development and testing will be good enough for now. I´m too lazy to migrate my whole project to the vite/react environment, but maybe if there is no other option i would consider that also. Thank you so much for the fast response.

[Danielku15]

The other option to still use alphaTab in any kind of app is to ensure it is not bundled but rather shipped as a static asset. The key "problem" with frameworks is that the bundlers like webpack and vite have only limited support for WebWorkers and Audio Worklets with their way they are merging, splitting and loading dependencies.

The idea for a working version is:

• Ensure we have a file containing alphaTab in a format which can be launched as worker and audio worklet
• Let alphaTab know where it can find its main file and how to start the background workers.

I will try to spin up some next.js example on how it could work. Might need to hard-code some stuff which is normally auto generated by the webpack plugin but I have some ideas to get it working.

[Danielku15]

Update: I fiddled together some stuff which allows using alphaTab in next.js: https://github.com/CoderLine/alphaTabSamplesWeb/tree/feature/nextjs/src/webpack-nextjs

It combines three things:

1. Telling WebPack to resolve external dependencies as global page variable (and activate this for alpahTab).
2. Copy alphaTab as-is to the /public as asset
3. Create a alphaTab module to provide alphaTab types and allow dynamic loading of alphaTab via Script

There might be alternative approaches but I'd say that's the lowest risk solution. The approach could use some tuning and just is a "getting started" example. Not sure how well things play with page routing.

[Danielku15]

I just released alphaTab 1.3.1 fixing the known issues around Webpack. 🥳

https://github.com/CoderLine/alphaTabSamplesWeb/tree/main/src/webpack-nextjs
https://github.com/CoderLine/alphaTab/releases/tag/v1.3.1

[juliandevnguitar]

This is great! Thank you very much for the effort in putting up a solution so quickly. This helps a lot with my project, i will try right away and tell you how it goes!

[juliandevnguitar]

I just started to play around with the new version and checked out the example from the first link that you provided, but i think i'm missing something, fonts are not loading and i get a 404 console error. On the README.md file, you mention a special src/alphatab.ts
but its not provided on the repo, can you help me find this file so i can integrate it on my project ?