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

RSWilli commented 1 year ago

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

SSR needs to be turned off
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 commented 1 year ago

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

RSWilli commented 1 year ago

@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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

jimmywarting commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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:

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

RSWilli commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 5 months ago

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

kalegd commented 2 weeks ago

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

sveltejs / kit