"Reference Error: Cannot access uninitialized variable" in Safari on MacOS

[RSWilli]

Describe the bug

Safari throws an Exception in this line for me.

Reference Error: Cannot access uninitialized variable

svelte-kit version 1.0.0-next.561 renders the +error.svelte normally

Reproduction

Repository with minimal example: https://github.com/RSWilli/sveltekit-bug-repro

1. SSR needs to be turned off
2. a svelte module needs to import a module that uses top-level-await to initialize an exported variable

Logs

No response

System Info

I'm running two machines currently, the dev process is this linux machine:

  System:
    OS: Linux 5.15 Arch Linux
    CPU: (8) x64 Intel(R) Core(TM) i5-8350U CPU @ 1.70GHz
    Memory: 20.14 GB / 31.22 GB
    Container: Yes
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.3.0 - ~/.nvm/versions/node/v18.3.0/bin/node
    Yarn: 1.22.19 - /usr/bin/yarn
    npm: 8.11.0 - ~/.nvm/versions/node/v18.3.0/bin/npm
  Browsers:
    Chromium: 107.0.5304.110
    Firefox: 107.0
  npmPackages:
    @sveltejs/adapter-static: ^1.0.0-next.21 => 1.0.0-next.48 
    @sveltejs/kit: ^1.0.0-next.417 => 1.0.0-next.561 
    svelte: ^3.53.1 => 3.53.1 
    typescript: ^4.9.3 => 4.9.3 

and the test machine that has the error is a MacBook without nodeJS:

macOS 12.5.1
Safari 15.6.1

Severity

blocking all usage of SvelteKit

Additional Information

maybe this is a svelte/vite error instead of kit?

[Conduitry]

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

[RSWilli]

@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

[albanx]

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

[bluwy]

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

[albanx]

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

[RSWilli]

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

[jimmywarting]

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?

[ruarkvallen]

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.

[Mellbin]

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.

[acurrieclark]

I have also encountered the same issue as the original 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.

[RSWilli]

I have also encountered the same issue as the original 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.

[austenc]

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. 🤷‍♂️

[braden-w]

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.

[Serator]

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.

[Jothsa]

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 https://github.com/WebKit/WebKit/pull/24122