Client does not hydrate in Safari when accessed over network due to a "Unhandled Promise Rejection"

UltraCakeBakery commented 1 year ago

Describe the bug

When you npm run dev --host the client does not hydrate due to the error shown in the logs section of this issue. It appears to happen whenever you access the site over the network. Locally it all works fine.

Reproduction

It should work with any new initialised project.

npm run dev --host
Open the link on another device using the Safari browser.

It also happens when I download this project and run it locally: https://stackblitz.com/edit/sveltejs-kit-template-default-q5pusk?file=README.md

Logs

[Info] Successfully preconnected to https://fonts.googleapis.com/
[Info] Successfully preconnected to https://fonts.gstatic.com/
[Debug] [vite] connecting... (client, line 206)
[Debug] [vite] connected. (client, line 286)
[Warning] The next HMR update will cause the page to reload (client.js, line 1987)
[Error] ReferenceError: Cannot access uninitialized variable.
(anonymous function) — client.js:351
map
(anonymous function) — client.js:351
get_navigation_result_from_branch — client.js:321
(anonymous function) — client.js:1769
    handleError (app.js:33)
    handle_error (client.js:1314)
    (anonymous function) (client.js:1788)
[Error] Unhandled Promise Rejection: ReferenceError: Cannot access uninitialized variable.
    (anonymous function) (start.js:22)

System Info

The command did not output anything. Also, due to me using multiple devices, I doubt the specific information is helpfull.

I use the latest version of SvelteKit, Vite, Svelte 4.0, Chrome and Safari. If you still need the full logs, let me know.

Severity

blocking all usage of SvelteKit

Additional Information

No response

UltraCakeBakery commented 1 year ago

Here is the part of the code generated/shipped by sveltekit that throws the error in my safari browser:

async function get_navigation_result_from_branch({
        url,
        params,
        branch,
        status,
        error,
        route,
        form
    }) {
        /** @type {import('types').TrailingSlash} */
        let slash = 'never';
        for (const node of branch) {
            if (node?.slash !== undefined) slash = node.slash;
        }
        url.pathname = normalize_path(url.pathname, slash);
        // eslint-disable-next-line
        url.search = url.search; // turn `/?` into `/`
        /** @type {import('./types').NavigationFinished} */
        const result = {
            type: 'loaded',
            state: {
                url,
                params,
                branch,
                error,
                route
            },
            props: {
                // @ts-ignore Somehow it's getting SvelteComponent and SvelteComponentDev mixed up
                constructors: compact(branch).map((branch_node) => branch_node.node.component) // This is line 351
            }
        };

UltraCakeBakery commented 1 year ago

Can confirm it also is broken in chrome on iOS. I do not think the browser used is the problem here.

edit: I just learned chrome on iOS is practically safari. So maybe it is a browser specific problem... IMG_7E44F7253228-1

Renkas commented 1 year ago

"Chrome on iOS" is Safari. Well all the browsers in iOS are just skinned Safari

geoffrich commented 1 year ago

I can't repro this - steps I followed

Create a new svelte demo app
npm install
npm run dev -- --host
visit website at http://192.168.1.7:5173 on both desktop & iOS Safari 16.5
website hydrates appropriately - no errors observed in console, homepage counter is interactive

Is there anything I did differently?

This does sound similar to #8529 & #2889, which have both been tricky to track down.

UltraCakeBakery commented 1 year ago

I can't repro this - steps I followed

Create a new svelte demo app

npm install

npm run dev -- --host

visit website at http://192.168.1.7:5173 on both desktop & iOS Safari 16.5

website hydrates appropriately - no errors observed in console, homepage counter is interactive

Is there anything I did differently?

This does sound similar to #8529 & #2889, which have both been tricky to track down.

I tried to recreate it again today, and the error no longer occurs.

My phone has not been restarted, nor has safari. Even my dev server was still running since the last time I tested this yesterday, without me having made any changes to the project.

Now it all magically works. No error is being thrown. The code output has not changed either. The script now just runs...

UltraCakeBakery commented 1 year ago

I'm going to close this issue due to it clearly being safari being buggy, and if not, the previously linked issues practically describe the same problem. If GitHub showed that issue when I searched for it, I would've just replied to that issue instead in the first place.

Feel free to re-open this if needed.

sveltejs / kit