Using Annotorius for openseadragon with Webpack under Symfony

[drisssadoun]

Hello,

I'm trying to install Annotorious to use it with openseadragon under a Symfony 7 project that uses webpack encore.

Annotorious version

• used package @annotorious/annotorious and @annotorious/openseadragon
• version number : @annotorious/[email protected]
• Symfony 7
• npm version 6.14.18
• node version : 14.21.3

Issue behavior

I've installed both @annotorious/annotorious and @annotorious/openseadragon using these commands :

npm install @annotorious/annotorious

npm install openseadragon @annotorious/openseadragon

Then, we I try to build the project using : "npm run build" the below error is raised. I noticed that js files of the module annotorius are all compiled (from .ts files). I guess it may be the origin of the error ? I've installed ts-loader but it didn't solve the problem. Does anyone has an idea how I could solve the error ?

error in ./node_modules/@annotorious/openseadragon/dist/annotorious-openseadragon.es.js

Module parse failed: Unexpected token (49:22)
You may need an appropriate loader to handle this file type.
| return Hh.randomUUID();
| r = r || {};
| const n = r.random ?? ((i = r.rng) == null ? void 0 : i.call(r)) ?? sg();
| if (n.length < 16)
| throw new Error("Random bytes length must be >= 16");

[rsimon]

That can depend on different things. Are you using Annotorious as a dependency in your own project? If so, your app will only "see" compiled JS code (not the TypeScript source code). Or did you clone the source code and are you trying to build your own (modified) package?

Although either way: you are using fairly old versions of Node/npm. Please be sure to update at least to Node 18. (The current LTS version is Node 22.)

[drisssadoun]

Thank you for your answer. I'm using annotorius as a dependency in my project. Indeed, the error is linked to a compiled js file annotorious-openseadragon.es.js. For now I can't update npm version, as it's a shared project where other developers still need to stay on Node 14.
Can you see a way to solve the error ?
Best regards,

[rsimon]

Hm, no idea really. Depends on too many things, I guess. Node versions are definitely an issue. Webpack version could be, too – possibly an issue with UMD vs. ES modules. (Annotorious would be exposing both, but perhaps your build isn't correctly resolving.) Are using any babel plugins in your build?

P.S.: since it's not a bug with the library, I'm moving this to discussions.

[drisssadoun]

Yes, I'm using babel-loader for js files. Are you using a particular loader for compiled js files ?

[drisssadoun]

Hello, I've installed @annotorious/openseadragon on another project with Node version 20 and it works fine.
Thanks @rsimon for your answers.