[SOLVED] How to access exports of CDN module loaded in app.html?

How to access exports of CDN module loaded in app.html?

I'm importing a module in my app.html as follows

<body data-sveltekit-preload-data="hover">
    <script type='module' src='https://cdn.jsdelivr.net/npm/@owlbear-rodeo/sdk@3.1.0/+esm'></script>
    <div class="h-screen" style="display: contents">%sveltekit.body%</div>
</body>

It's not clear to me what the correct syntax would be for accessing the exports (the default is OBR) in my +page.svelte files:

// routes/+page.svelte
<script>
    import OBR from ???
</script>

Is this possible, or am I thinking about this wrong?

Solution

If you use a CDN, you should be using the same URL, i.e.

import ORB from 'https://cdn.jsdelivr.net/npm/@owlbear-rodeo/sdk@3.1.0/+esm'

The browser should only load the module once and all references will be to the same instance of the module.

Note that this module in particular is not really SSR compatible due to the usage of window.

Unfortunately it looks like the Vite plugin for Svelte has issues with imports like this at the moment. Dynamic imports do not seem to work either...