page.url.searchParams not set on first page land with static build

[Axeldeblen]

Describe the bug

$page store is not set on initial landing when building site with the static adapter. Further navigation around the site when adding query strings works as intended. As an example where the query string is console logged onMount

You go to site-example.com/?tag=help $page.url.searchParams.get('tag') is equal to null
you click a link to site-example.com/page2/?tag=red $page.url.searchParams.get('tag') is equal to 'red'
you click taking you back to the root path site-example.com/?tag=blue $page.url.searchParams.get('tag') is equal to 'blue'

This issue seems to only be reproduced when the site is deployed. Running the site in preview mode does not reproduce the issue.

Reproduction

I've deployed the example repo with surge, open the console to see the logs.

Example repo is a create-svelte clone with the addition of the static adapter

https://cautious-cars-123.surge.sh/?tag=sendHelp

https://github.com/Axeldeblen/static-build-test

issue can also be created by serving the files without vite, for example in the repo run npm run build && npm run http-serve to serve the build output with http-server pacakge.

Logs

mount

null
mount
tag=navigated
navigated
mount
tag=backToHome
backToHome

System Info

System:
    OS: macOS 11.5.2
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 255.88 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.17.3 - ~/.nvm/versions/node/v14.17.3/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 8.1.3 - ~/.nvm/versions/node/v14.17.3/bin/npm
  Browsers:
    Brave Browser: 97.1.34.81
    Chrome: 97.0.4692.99
    Firefox: 94.0.2
    Safari: 14.1.2
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.17
    @sveltejs/adapter-static: ^1.0.0-next.26 => 1.0.0-next.26
    @sveltejs/kit: next => 1.0.0-next.251
    svelte: ^3.44.0 => 3.46.3

Severity

annoyance

Additional Information

No response

[Conduitry]

See #2361/#2444. It's intended that this not be accessible during pre-rendering (and thus not during static rendering either), because there's no way to have separate rendered static files for the same pathname and different query parameters.

I'm not sure why #3314 isn't correctly throwing an error when you do this, however.

[Axeldeblen]

Right I see what you mean now, cheers for the reply. Would it be possible to intentionally hydrate the page store after the initial load? I guess that would have its own potential downfalls but at least it would help any components work as intended that rely on the query params. That could avoid any future confusion in these kind of cases.

edit: I found this comment from Rich which describes the problem / solutions - #2363 (comment)

It did actually throw the build error when I had the same logs in the script body e.g

	onMount(() => {
		// no build warning
		console.log('mount');
		console.log($page.url.searchParams.toString());
		console.log($page.url.searchParams.get('tag'));
	});

	// build warning throws correctly
	console.log($page.url.searchParams.toString());
	console.log($page.url.searchParams.get('tag'));

[gyurielf]

DId you try to pass down from the context="module" ?
Like this:

<script context="module" lang="ts">
    import { protectedRedirect } from '$lib/utils/helpers';
    import type { Load } from '@sveltejs/kit';
    import { browser } from '$app/env';
    export const prerender = true;
    export const load: Load = async ({ url, fetch, params, stuff, session }) => {
        if (browser) {
            if (url.searchParams) {
                return protectedRedirect({
                    props: {
                        queryString: resolveQueryString(url.searchParams.toString())
                    }
                });
            }
            return protectedRedirect();
        }
        return { fallthrough: true };
    };
</script>