Skip to content

<Component {...obj} x={1}> mutates obj #8171

@phoenisx

Description

@phoenisx

Describe the bug

TLDR; $page.data is getting modified, even though I never modified it.

Details:

Passing a perfectly well serializable data directly as a prop (using spread operator), where the component also accepts some non-serializable data like callback functions, breaks the SSR, throwing the following error.
image

Reproduction

https://github.com/phoenisx/repro-sveltecsp/tree/repro/page-data-mismatch

Logs

> vite dev

  VITE v4.0.3  ready in 465 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help
11:21:00 PM [vite-plugin-svelte] ssr compile in progress ...
Date:  { id: '1', value: 'foo' }
Data returned from `load` while rendering / is not serializable: Cannot stringify a function (data.data[0].onUpdate)
Error: Data returned from `load` while rendering / is not serializable: Cannot stringify a function (data.data[0].onUpdate)
    at render_response (node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@sveltejs/kit/src/runtime/server/page/render.js:191:9)
    at async render_page (node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@sveltejs/kit/src/runtime/server/page/index.js:299:10)
    at async resolve (node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@sveltejs/kit/src/runtime/server/index.js:356:17)
    at async respond (node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@sveltejs/kit/src/runtime/server/index.js:229:20)
    at async node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@sveltejs/kit/src/exports/vite/dev/index.js:444:22
Date:  { id: '1', value: 'foo', onUpdate: [Function: onUpdate] }
Data returned from `load` while rendering / is not serializable: Cannot stringify a function (data.data[0].onUpdate)
Error: Data returned from `load` while rendering / is not serializable: Cannot stringify a function (data.data[0].onUpdate)
    at render_response (node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@sveltejs/kit/src/runtime/server/page/render.js:191:9)
    at async render_page (node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@sveltejs/kit/src/runtime/server/page/index.js:299:10)
    at async resolve (node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@sveltejs/kit/src/runtime/server/index.js:356:17)
    at async respond (node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@sveltejs/kit/src/runtime/server/index.js:229:20)
    at async node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@sveltejs/kit/src/exports/vite/dev/index.js:444:22
11:21:01 PM [vite-plugin-svelte] ssr compile done.

System Info

### System: 
- macOS 13.0.1
- Shell: fish 3.5.1
- Terminal: tmux
- CPU/GPU: Apple M1 Pro

### Binaries
- Node v18.9.0
- pnpm v7.13.2

### Packages
- @sveltejs/adapter-vercel: ^1.0.0 => 1.0.0
- @sveltejs/kit: ^1.0.1 => 1.0.1
- svelte: ^3.55.0 => 3.55.0

Severity

serious, but I can work around it

Additional Information

The above bug goes away if I deep-clone the passed $page.data using JSON.stringify. That's the workaround I am using right now.

Might be related to:

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions