[bug?] Shadow Endpoints fails to hydrate big data sent to their matching page because it is truncated. causing SyntaxError: Unexpected end of JSON input

[swyxio]

Describe the bug

i originally came to this issue when trying to use shadow endpoints for the first time:

EDIT: there are more discovery points in subsequent comments below.

Reproduction

https://stackblitz.com/edit/sveltejs-kit-template-default-ahljwi?file=src/routes/about.svelte

npm run dev

and go to the /about endpoint

Logs

9:03:33 PM [vite] hmr update /src/routes/about.svelte

System Info

this is my mac envinfo since stackblitz doesnt seem to be able to run envinfo

  System:
    OS: macOS 11.4
    CPU: (8) x64 Apple M1
    Memory: 51.47 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.4.1 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.18.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 98.0.4758.80
    Safari: 14.1.1
  npmPackages:
    @sveltejs/adapter-netlify: ^1.0.0-next.44 => 1.0.0-next.44 
    @sveltejs/kit: ^1.0.0-next.260 => 1.0.0-next.260 
    svelte: ^3.44.3 => 3.46.4 

Severity

blocking an upgrade

Additional Information

No response

[ghostdevv]

Works for me on the stackblitz link you sent

[swyxio]

ok verified that when i try the stackblitz in incognito it works. so it just means i've been unable to make a stackblitz repro, because i'm definitely seeing this error locally.

the error:

SyntaxError: Unexpected end of JSON input
    at JSON.parse (<anonymous>)
    at Renderer.start (http://localhost:3000/@fs/Users/swyx/Work/swyxkit/.svelte-kit/runtime/client/start.js:739:20)
    at async start (http://localhost:3000/@fs/Users/swyx/Work/swyxkit/.svelte-kit/runtime/client/start.js:1484:15)

and when i look at that code in start.js it does this

				if (is_leaf) {
					const serialized = document.querySelector('[data-type="svelte-props"]');
					if (serialized) {
						props = JSON.parse(/** @type {string} */ (serialized.textContent));
					}
				}

when i try to add logs to it it some how truncates weirdly and i wonder if thats the issue, am i sending too much data?

[swyxio]

ok i added a debugger and confirmed that sveltekit seems to be truncating my json sent over the wire somehow, and therefore sveltekit is failing to JSON.parse it

[swyxio]

when i look for the source of the bug i see that when the json data is embedded in the page, it is truncated abnormally.

i was able to reproduce once in stackblitz, but then i refreshed and it went away, now i cannot repro in stackblitz but it is still persistent in my local computer

[PH4NTOMiki]

@sw-yx there are multiple issues on that page, it looks like something with serializing.

[PH4NTOMiki]

Yeah, I reproduced it on both stackblitz and local, I'll try to debug it.

[PH4NTOMiki]

JSON.stringify makes a string but then JSON.parse fails to parse it, because because of those html elements in the string, the HTML becomes malformed and it breaks.

[swyxio]

WOW, amazing, thank you so much @PH4NTOMiki !