"Cannot read properties of null (reading 'src')" exception thrown when using alphaTab in Javascript module

[yshlin]

Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

I'm trying to develop a toast UI editor plugin that uses alphaTex to visualize guitar tabs.
And I found that when I use alphaTab in a Javascript module,
I get an exception: "Cannot read properties of null (reading 'src')" when initializing alphaTab,
and then the initialization process is interrupted.

Expected Behavior

Because there's no "document.currentScript" in javascript module environment,
it would be safer to have null check on document.currentScript before returning document.currentScript.src.
So the initialization process won't be blocked due to the problem.

Steps To Reproduce

1. create a javascript module
2. import alphaTab
3. run the script
4. see the exception in console log

Link to jsFiddle, CodePen, Project

https://jsfiddle.net/yshlin/fo0pL65u/10/

Found in Version

1.2

Platform

Web

Environment

- **OS**: macOS 11.6
- **Browser**: Chrome 94.0.4606.61

Anything else?

Still seeing the problem on the develop branch:
https://github.com/CoderLine/alphaTab/blob/develop/src/Environment.ts#L235

I was able to get my code to work after fixing this line.

[Danielku15]

This is indeed an issue, I will try to add proper module support for consuming alphaTab as ES6 module. The tricky part is that alphaTab needs the URL to the own script file to spawn background WebWorkers. import.meta.url seems to be an alternative we can use in such cases. Otherwise the devs would need to set the path to the file manually.

[Danielku15]

There is more to the support of ES modules than just fixing the currentScript. alphaTab currently uses the UMD pattern to provide alphaTab as global export, CommonJS or AMD. The ES6 modules are completely incompatible with any of these systems as it requires top level export statements from the file and there is no way to expose UMD+ESM from a single file due to the different syntax of ESM which is really strict. ES6 modules seem to be the future but it is still not 100% established and this transition phase makes it hard for library authors because we have to support all platforms.

Due to that I am forced to create an additional compilation output for ES6 modules. I looked up the practices and adapted the output and logic of alphaTab accordingly. There is now a new alphaTab.mjs which contains an ES6 module compliant output.

References:

• https://www.sensedeep.com/blog/posts/2021/how-to-create-single-source-npm-module.html
• https://2ality.com/2019/10/hybrid-npm-packages.html
• https://dmnsgn.me/blog/javascript-package-development-for-the-es-modules-era/