sveltejs / kit

web development, streamlined
https://kit.svelte.dev
MIT License
18.45k stars 1.89k forks source link

Client error only in Safari, `Cannot access uninitialized variable.` #8529

Open pheuter opened 1 year ago

pheuter commented 1 year ago

Describe the bug

Was instructed to create a new issue with repro from convo in #2889.

Reproduction

https://github.com/pheuter/safari-repro

Logs

[Error] ReferenceError: Cannot access uninitialized variable.
    handleError (client-manifest.js:16)
    handle_error (client.js:1692)
    (anonymous function) (client.js:1630)
    asyncFunctionResume
    (anonymous function)
    promiseReactionJobWithoutPromise
    promiseReactionJob

[Error] Unhandled Promise Rejection: ReferenceError: Cannot access uninitialized variable.
    (anonymous function) (start.js:38)
    asyncFunctionResume
    (anonymous function)
    promiseReactionJobWithoutPromise
    promiseReactionJob

System Info

System:
    OS: macOS 13.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 4.93 GB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 19.4.0 - /opt/homebrew/bin/node
    npm: 9.2.0 - /opt/homebrew/bin/npm
    Watchman: 2022.11.14.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 109.0.5414.87
    Safari: 16.2
  npmPackages:
    @sveltejs/adapter-node: 1.1.1 => 1.1.1
    @sveltejs/kit: 1.1.0 => 1.1.0
    svelte: 3.55.1 => 3.55.1
    vite: 4.0.4 => 4.0.4

Severity

blocking all usage of SvelteKit

Additional Information

Blocks all client-side usage of SvelteKit on latest versions of Safari.

Smirow commented 1 year ago

Seems to works fine if you import uno.css in the client hooks src/hooks.client.ts. Doesn't help on why it's Safari specific.

pheuter commented 1 year ago

@Smirow While moving the imports from +layout.svelte into hooks.client.ts fixes the client-side error, it appears to add FOUC upon server-side loads, suggesting it may not be the proper place to add those imports?

Smirow commented 1 year ago

@pheuter yes, also noticed the FOUC, same thing happens with Tailwind if you import it in hooks.client.ts. Which raises questions about the lifecycles of hooks.client.ts and +layout.svelte.

Rich-Harris commented 1 year ago

This looks to me like a Uno bug, not a SvelteKit bug. Have you raised an issue over there?

pheuter commented 1 year ago

@Rich-Harris https://github.com/unocss/unocss/issues/2111#issuecomment-1407424016 šŸ¤·

gwww commented 1 year ago

I am also having this problem. Moving the import in not a solution for reasons above, but it does make the exception go away. However, I'd like to offer some more info.

With my import in my normal spot, not moved to hooks.client.js, I get many errors when doing a npm dev run. The errors start right after the message [vite-plugin-svelte] ssr compile in progress .... I started by creating a discussion on TailwindCSS because the errors all appeared to be related to Tailwind. When I remove UnoCSS from the error go away. Rather than repeat, here is that thread: https://github.com/tailwindlabs/tailwindcss/discussions/10496

brittianwarner commented 1 year ago

Our solution to this issue: link

maxcoredev commented 9 months ago

Want to note that this error appears only in npm run dev without any special settings. Everything is fine in build/preview (unless there is no vite.build.target = 'esnext' of course). So it's not critical