Safari issue when ssr is false

[cge-taal]

Describe the bug

In a simple SvelteKit skeleton project with a single library added and where SSR is disabled, Safari fails with Unhandled Promise Rejection: ReferenceError: Cannot access uninitialized variable.. Other browsers tested had no issues.

Reproduction

Please refer to https://github.com/cge-taal/sveltekit-safari-ssr-example and run with npm run dev.

In src/routes/+layout.ts, when export const ssr = false is set, Safari fails with Unhandled Promise Rejection: ReferenceError: Cannot access uninitialized variable.

Logs

No response

System Info

macOS, Safari 16.6

Severity

blocking all usage of SvelteKit

Additional Information

No response

[cge-taal]

Given

• ReferenceError: Cannot access uninitialized variable on Safari #2889 (comment)
• Top-level await svelte#5501

It seems to be an old bug in SvelteKit that resurfaced, related to top-level await support on Safari.

This is pretty important for us to have fixed and stable (tested) in a framework we hope to use for our products.

Any idea of a likely fix soon would be much appreciated.

Thanks for all the efforts.

[MoonlightOffice]

Create a file called src/hooks.client.ts and add this line to it:

import { encodeBase58Address } from "@bitauth/libauth";

The code in src/hooks.client.ts is executed before the app starts. I guess the module you're using (@bitauth/libauth) requires some initialization before the node is rendered or mounted when you use safari.

For more information about hooks: https://kit.svelte.dev/docs/hooks

[cge-taal]

Thanks @MoonlightOffice , to be honest I did not try to find workarounds yet, because I think it should work by default, as it does in non-Safari browsers. Given the issue is related to top-level await, I did consider trying to wrap all interaction with @bitauth/libauth inside async methods.

I could try your workaround when there is a moment, but I do believe it would be most useful if a framework like SvelteKit makes workarounds unnecessary for users.

[cge-taal]

I can provide some extra feedback on your suggestion @MoonlightOffice.

It seems to work fine for the example repository I listed above, which is nice.

However, my real project is a pretty large monorepo (turbo) and I'm accessing @bitauth/libauth in a standard library package which I'm importing from my main application.

If I add all the same @bitauth/libauth imports I use in the package, to a src/hooks.client.ts file in my main application and also install @bitauth/libauth as a dependency for the main application, this workaround does not function anymore.

[cge-taal]

Wrapping @bitauth/libauth usage inside async functions is infeasible, as I need synchronous behaviour for some use-cases.

[teemingc]

closing as duplicate of #8529
This is caused by a bug in Safari that prevents the use of top-level awaits client-side. Libraries and even SvelteKit need to be refactored to avoid the use of top-level awaits in the browser.
Related: WebKit/WebKit#24122