"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.