pushState() throw DevalueError: Cannot stringify POJOs with symbolic keys

[dangelomedinag]

Describe the bug

const result= preloadData(url) result.data --> returns POJO
when you use pushState(url, {key: result.data}) for the second time result.data has a Symbol($state) and cannot be serialized

This happens when using pushState or replaceState, if you don't use any result.data it always returns a POJO

Reproduction

reproduction

// routes/subroute.js
export const load = () => {
  return {
    user: {
      number:123,
      name: "string"
    }
  }
}

<!-- routes/+page.svelte -->
<script>
  import {pushState, preloadData} from "$app/navigation"
  function getData(){
    const result = preloadData("/subroute")
    console.log(result.data)  
    // first time {user: {…}}
    // second time {user: {…}, Symbol($state): {…}}
    if (result.type === "loaded" && result.type === 200) {
      pushState("/subroute", {key: result.data}) // second time --> DevalueError: Cannot stringify POJOs with symbolic keys
    }
  }
</script>
<button onclick={getData}>click two times</button>

Logs

No response

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.18.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.4.2 - /usr/local/bin/npm
    pnpm: 8.10.5 - /usr/local/bin/pnpm
  npmPackages:
    @sveltejs/adapter-auto: ^3.0.0 => 3.0.0 
    @sveltejs/kit: ^2.0.0 => 2.0.0 
    @sveltejs/vite-plugin-svelte: ^3.0.0 => 3.0.1 
    svelte: ^5.0.0-next.25 => 5.0.0-next.25 
    vite: ^5.0.0 => 5.0.10

Severity

annoyance

Additional Information

No response

[luisfontes]

Had the same error. My code is similar to what the OP used in his repro.

[benmccann]

Can you try again with the latest version of SvelteKit? devalue was largely removed in #11340

[dangelomedinag]

@benmccann the error persists. A clean project from npm create svelte@latest and the @sveltejs/kit@latest and svelte@next packages updated to the latest version.

[Conduitry]

@benmccann The error looks to be getting thrown by the dev-only check in:

kit/packages/kit/src/runtime/client/client.js

Lines 1772 to 1780 in 26477cf

	if (DEV) {
	try {
	// use `devalue.stringify` as a convenient way to ensure we exclude values that can't be properly rehydrated, such as custom class instances
	devalue.stringify(state);
	} catch (error) {
	// @ts-expect-error
	throw new Error(`Could not serialize state${error.path}`);
	}
	}

Should this just be removed entirely? What might we miss out on by doing that? I'm not sure what our other options would be in any case, though. cc @dummdidumm

[benmccann]

Simon and Rich know more about that one than I do

[dummdidumm]

Mhm this is our $state proxies interfering with the dev time check, which is unfortunate. Maybe we should recursively call unstate on the state object before checking with devalue. The alternative is to remove the check entirely.

[IcelandicIcecream]

Any updates on this?

[IcelandicIcecream]

Mhm this is our $state proxies interfering with the dev time check, which is unfortunate. Maybe we should recursively call unstate on the state object before checking with devalue. The alternative is to remove the check entirely.

Oh, realised i can just unstate data object before passing it into the pushstate and it works fine as a workaround

[Rich-Harris]

This is fixed in 2.5.7 by making devalue (which we use to check whether values can be serialized to history.state) more tolerant