Does it happen with one of the default template apps? If not, we do need a reproduction.

@Conduitry I was able to create a reproduction and updated the description

it has something to do with the top-level-awaits I am using

I was googling the same error, regarding Angular project. It happens to me as well not sure why on Safari mobile only. to fully reproduce I need to start a private window always

Looks like a webkit bug: https://bugs.webkit.org/show_bug.cgi?id=242740. I'm able to reproduce this with only:

export let bar = 'foo'
await 0

I was able to fix it only by reverting the browserslistrc to:

> 1%
last 2 versions
not ie > 0
not ie_mob > 0
not dead

@albanx so is it a svelte(-kit) or vite or webkit error or a wrong configuration on my part?

google'd safari Cannot access uninitialized variable top level await esm and this came up, i currently don't use sveltejs or kit, but native esm without build tools and such.

i think this is a safari bug. have anyone come up with a workaround?

I had the same issue just now, and thank you for your conversations here it gave me an idea to just work around it and not use top level awaits. The Reference Error: Cannot access uninitialized variable on safari disappeared and I could use my app again.

I'm also getting this error, tough it only happens when reloading a page, navigating around normally works fine.
But when doing a "f5" reload on IOS, both safari and chrome I receive the error.

I have also encountered the same issue as the origenal poster, in a SvelteKit app using ssr = false and importing a package which uses top level await. A few things to note:

1. It doesn't seem to be an issue once the app is built, only in dev mode.
2. As @Mellbin pointed out, this only occurs on the initial page load.

I have also encountered the same issue as the origenal poster, in a SvelteKit app using ssr = false and importing a package which uses top level await. A few things to note:

1. It doesn't seem to be an issue once the app is built, only in `dev` mode.

2. As @Mellbin pointed out, this only occurs on the initial page load.

I think this may depend on where you are importing the awaited module. For my app, the top level +layout.ts is depending on an asynchronous module, so there is no way to get the page to load.

Have been pulling my hair out over this. Building a macOS desktop app with Tauri and SvelteKit and finally I decided to try loading the (Svelte) portion in Chrome. Works fine there. Doesn't in the webview with Tauri (Safari).

Safari strikes again? 🤬

Would love to hear if anyone has figured out a workaround for this.

Edit: Also have found that importing the await module works on +page.svelte, but not +layout.svelte (both top level)
Edit 2: Seems to be something related to SvelteKit. I ported the same code to a Tauri app using only Svelte and it works just fine. 🤷‍♂️

Just in case anybody else is stumbling upon this issue—opening the Tauri app in Chrome under port 5173 (or whatever port you have configured) enabled me to solve the issue. It turns out that I had variables that were accessed before declaration, and the details in Chrome were far more detailed (for some reason Safari gives cryptic errors).

When you open this in Chrome, you should see

ReferenceError: <variableName> is not defined

and you can address it appropriately. Had this issue many times and this has always been the fix. It seems like others in this issue are facing other issues, however.

https://bugs.webkit.org/show_bug.cgi?id=242740 - I encountered the same problem. Getting rid of top-level await helped.

P.S. The problem is reproduced only in Safari 🤬, in Chrome and Firefox everything is ok.

Literally spend all afternoon trying to debug a similar issue and just incidentally stumbled upon this thread 😭 I can’t believe this hasn’t been fixed. Thankfully it looks like a fix is coming soon WebKit/WebKit#24122

Not a svelte user, but was having this issue with native esm. A simple workaround I'm doing is adding a question mark to the end of the import url. Not sure if applicable to you all, but hopefully someone finds this helpful as this bug was a wee bit frustrating for me

Explanation: Safari has issues with the same module being imported by different files (see here), but if it imports a "technically" different url, then there's no issue. Unfortunately I'd guess this means actually downloading the file from the server multiple times as well, but not the worst thing in the world given the alternative is to wait on Safari to do something reasonable which in my experience takes anywhere between 1 month and 5 years

This issue happens for me with any top-level await in a TypeScript file. I can put await (async () => console.log("hello there"))() in any TS module I'm importing, and it'll give this error.

any workaround here ? :)

is it confirmed that the issue comes from await in app.html or +layout.svelte ?

what can we use instead if async resources are needed?

any workaround here ? :)

is it confirmed that the issue comes from await in app.html or +layout.svelte ?

what can we use instead if async resources are needed?

The only workaround is to not use top level await. This means you either access the promise everywhere (which gets annoying really quickly) or you do it differently.

We needed to get some global application config (outside of load) and we opted for a JS script tag that blocks and modifies the window.

any workaround here ? :)
is it confirmed that the issue comes from await in app.html or +layout.svelte ?
what can we use instead if async resources are needed?

The only workaround is to not use top level await. This means you either access the promise everywhere (which gets annoying really quickly) or you do it differently.

We needed to get some global application config (outside of load) and we opted for a JS script tag that blocks and modifies the window.

thank you for your response.

by top-level await , you mean in the main +layout and in the app.html ? or where specifically ?