Importing UMD module (openseadragon) fails only with sveltekit due to 'root' being undefined, works in other vite-based projects (astro/vue)

[sebastiangug]

Describe the bug

Openseadragon works fine with svelte, as any standard JS library is expected to work.

REPL with basic Svelte basic example working.

It also works fine with Vite & other vite-built projects, based on a bunch of examples out there.

It does not seem to work with sveltekit specifically (check reproduction link)

---

The first issue when simply importing it, without attempting to actually use it, it is throwing document is undefined and the whole app does not compile -- caused probably because the lib is trying to run browser-code before it is in the browser.

Fix: move whole import to onMount() , maybe add an if window or if browser -- neither change the end result.

    const OpenSeadragon: any = await import("openseadragon" ).then(m => m.module || m);

This then compiles and the rest of the app runs -- but the component throws a root is undefined type error. This is caused by the syntax of the UMD export declaration, specifically:

https://github.com/openseadragon/openseadragon/blob/c06e719198997736574e518702d4dc7bc7d9946b/src/openseadragon.js#L3036

Fix: move all the compiled build contents of the openseadragon module to my lib directory. Edit the openseadragon.js contents on that line to add root = root || globalThis or root = root || window -- both produce the same result really.

This does not make the import work, but it makes it available on window.OpenSeadragon .

After dealing with some basic CORS issues, this now results into a WebGL context lost warning in the console and the whole thing falls apart.

This seems to me that there's more failures upstream with trying to use an UMD JS package with sveltekit -- considering this very old library is well maintained & working fine with a ton of other frameworks out there, including non-kit svelte.

Issue opened on openseadragon github: openseadragon/openseadragon#2638 (comment)

Discord thread: https://discord.com/channels/457912077277855764/1318107615250616421

Reproduction

https://github.com/sebastiangug/openseadragon-svelte

Logs

N/A

System Info

Windows 10 64 Bit, latest Chrome & Firefox, tried Edge for good measure. 

Latest versions but tried older versions of vite & openseadragon.

Severity

blocking all usage of SvelteKit

Additional Information

Deep-zoom images is a core feature of my sveltekit app, I've poured well over 1000 hours over the last 6 months into this, so i'm rather completely blocked from progressing further & launching a beta until I solve this, switching from sveltekit this late is not an option.

I honestly did not expect this to be a problem.