Fetch using load() in browser get response body but no response body returned during ssr

[guilledll]

Describe the bug

Hi everyone, i'm developing a sveltekit + laravel 9 app and i came across with a problem while testing ssr in my views.
When using the load function in my index.svelte the fetch() response of my laravel api is only readable from the browser but no from the server while rendering.

Entering index page triggers the ssr fisrt dispatch which is correct, because my laravel logs show so:
(Data obtained from telescope, a laravel api debugger)

SSR api response headers:

{
  "host": "localhost:8000",
  "connection": "keep-alive",
  "accept": "application/json",
  "accept-encoding": "gzip, deflate, br",
  "accept-language": "en,es-419;q=0.9,es;q=0.8",
  "cache-control": "max-age=0",
  "dnt": "1",
  "referer": "http://127.0.0.1:3000/",
  "sec-ch-ua": "".Not/A)Brand";v="99", "Google Chrome";v="103", "Chromium";v="103"",
  "sec-ch-ua-mobile": "?0",
  "sec-ch-ua-platform": ""Linux"",
  "sec-fetch-dest": "document",
  "sec-fetch-mode": "cors",
  "sec-fetch-site": "same-origin",
  "sec-fetch-user": "?1",
  "upgrade-insecure-requests": "1",
  "user-agent": "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.5060.114 Safari/537.36"
}

SSR api resonse:

{
  "Laravel": "9.18.0"
}

While my client response looks like this:
Browser response headers:

{
  "host": "localhost:8000",
  "connection": "keep-alive",
  "sec-ch-ua": "".Not/A)Brand";v="99", "Google Chrome";v="103", "Chromium";v="103"",
  "dnt": "1",
  "sec-ch-ua-mobile": "?0",
  "user-agent": "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.5060.114 Safari/537.36",
  "sec-ch-ua-platform": ""Linux"",
  "accept": "*/*",
  "origin": "http://127.0.0.1:3000",
  "sec-fetch-site": "cross-site",
  "sec-fetch-mode": "cors",
  "sec-fetch-dest": "empty",
  "referer": "http://127.0.0.1:3000/",
  "accept-encoding": "gzip, deflate, br",
  "accept-language": "en,es-419;q=0.9,es;q=0.8"
}

Browser response data:

Everything looks fine here, i've spent many hours looking for a solution but have nothing yet, my thougths are that fetch while ssr is unable to get the data that laravel is sending.
Maybe a header is missconfigured on the server side? Or fetch is not configured to get the data? Maybe fetch in ssr is not configured to take data from a php source?

Thanks to everyone in advance!

Reproduction

Fresh install of a laravel project.

php artisan serve to run server.

Only app URL can be accessed with http://localhost:8000

index.svelte

<script lang="ts" context="module">
  import type { Load } from "@sveltejs/kit";
  export const load: Load = async function ({ fetch, url }) {
        let res = await fetch("http://localhost:8000", {
        	headers: {
			accept: "application/json"
		}
        });
	try {
		console.log(await res.json()); <-- ssr fails here, but client doesn't
	} catch (error) {
		console.log(error);
	}
	return {
		props: {
			res
		}
	};
  }
</script>

Logs

Server side log:

TypeError: terminated
    at Fetch.onAborted (file:///home/guille/code/kit/node_modules/@sveltejs/kit/dist/node/polyfills.js:11987:50)
    at Fetch.emit (node:events:526:28)
    at Fetch.terminate (file:///home/guille/code/kit/node_modules/@sveltejs/kit/dist/node/polyfills.js:10246:11)
    at Object.onError (file:///home/guille/code/kit/node_modules/@sveltejs/kit/dist/node/polyfills.js:12121:35)
    at Request$2.onError (file:///home/guille/code/kit/node_modules/@sveltejs/kit/dist/node/polyfills.js:3152:27)
    at errorRequest (file:///home/guille/code/kit/node_modules/@sveltejs/kit/dist/node/polyfills.js:5735:13)
    at Socket.onSocketClose (file:///home/guille/code/kit/node_modules/@sveltejs/kit/dist/node/polyfills.js:5009:5)
    at Socket.emit (node:events:526:28)
    at TCP.<anonymous> (node:net:687:12) {
  [cause]: SocketError$3: closed
      at Socket.onSocketClose (file:///home/guille/code/kit/node_modules/@sveltejs/kit/dist/node/polyfills.js:4991:31)
      at Socket.emit (node:events:526:28)
      at TCP.<anonymous> (node:net:687:12) {
    code: 'UND_ERR_SOCKET',
    socket: {
      localAddress: undefined,
      localPort: undefined,
      remoteAddress: undefined,
      remotePort: undefined,
      remoteFamily: undefined,
      timeout: undefined,
      bytesWritten: 749,
      bytesRead: 2096
    }
  }
}

Server response (from laravel):

Response {
  [Symbol(realm)]: null,
  [Symbol(state)]: {
    aborted: false,
    rangeRequested: false,
    timingAllowPassed: true,
    requestIncludesCredentials: true,
    type: 'default',
    status: 200,
    timingInfo: {
      startTime: 410846.265964,
      redirectStartTime: 0,
      redirectEndTime: 0,
      postRedirectStartTime: 410846.265964,
      finalServiceWorkerStartTime: 0,
      finalNetworkResponseStartTime: 0,
      finalNetworkRequestStartTime: 0,
      endTime: 0,
      encodedBodySize: 20,
      decodedBodySize: 20,
      finalConnectionTimingInfo: null
    },
    cacheState: '',
    statusText: 'OK',
    headersList: HeadersList {
      [Symbol(headers map)]: [Map],
      [Symbol(headers map sorted)]: null
    },
    urlList: [ [URL] ],
    body: { stream: undefined }
  },
  [Symbol(headers)]: HeadersList {
    [Symbol(headers map)]: Map(9) {
      'host' => 'localhost:8000',
      'date' => 'Tue, 19 Jul 2022 03:04:06 GMT, Tue, 19 Jul 2022 03:04:06 GMT',
      'connection' => 'close',
      'x-powered-by' => 'PHP/8.1.8',
      'cache-control' => 'no-cache, private',
      'content-type' => 'application/json',
      'access-control-allow-origin' => 'http://127.0.0.1:3000',
      'access-control-allow-credentials' => 'true',
      'set-cookie' => 'XSRF-TOKEN=eyJpdiI6InZSM21LQ1pRZnR1b3ZySFEvaTZSeGc9PSIsInZhbHVlIjoiNURML3crVFpXb3BteFRJWlBsa0tRaWs0RFR6bVFMS0ZWNmlHZGVNMnJZc2tJYzN2eEtISkJrQmJxd3ZoSm80eUpsTHlLSjVBSllGVkl0TFBBdiswNjhKSlR4a2dSTnp2NlhBWS9HQXdlOXRrcHZ5bFJicEswME4xaUJVMFdHUzMiLCJtYWMiOiJhOTdiZWRjNzJjMTMwM2FjZDcxODI4ZWE4M2JiMDU1ZjhhMzBjYTcxNzFmMTIzZDk2ZWQxMTBiZWVjNDZhMjU5IiwidGFnIjoiIn0%3D; expires=Tue, 19 Jul 2022 05:04:06 GMT; Max-Age=7200; path=/; domain=127.0.0.1; samesite=lax, mis_horas_web_session=eyJpdiI6ImNqVlJ3bTFZRXU1Qmd4RUtXUitURVE9PSIsInZhbHVlIjoiV2Fld09mRURaUmVYclZwbWVCQllZekFKMnNYL3g1VnVaRnVJbW9IZTY5bExGR2lkVXRpOEV3RC9BOVpORmI0SE9vUEVaWnN5NitNbkYvY3diZlYwQXg4NVd6WFNQK21iZnRvenkxNHl3bjQxTFBraEl2U2UzVzNCc0R3TnlwM2ciLCJtYWMiOiJmNmUzYTUxODcwNjdlN2ZkNTIzZWVjYzEyOTQ5MmQ3NDRiYzNlYzY4N2RlYjI0NjY2MzJmOGRlMTljNzczNjNhIiwidGFnIjoiIn0%3D; expires=Tue, 19 Jul 2022 05:04:06 GMT; Max-Age=7200; path=/; domain=127.0.0.1; httponly; samesite=lax, 5QAoAk6FvSUDWU6YOJZbpTX4pwZDIGNTfCca8LhF=eyJpdiI6IkMwci9OTzk1dlFodStLL0NUTHZiSFE9PSIsInZhbHVlIjoia2t6NGRMaWltSHpDTWRxbjc3Wm5FR1hOeWxoVW5Ta29kWWd0UlN6VEs4bG5FZjVEYU9SRDdLOS9lSkpubVdwNElTWm5XeXdUUFBNQnVERXZiZlBjT1MyZUUzSjQwd3FIeVJTTThFN2hsK2FNWVVEaC93d3g2YkFUVDJZVUUvOWtTeHJkV29WeklUZ1g2VHVwSjY1R29EMWFUakJGWkRVc2ErTWdZWVlSNGZXWC82dWlwOHBRSDdKNXFEN3IzYW5IRndZRDh6MnJXRllscGcwV01xS0VMRlpGUHZHVGxZQ3lQaWtrNUN3dURFbGkyMFFNVFE2ZjJUT2FOUlJmbHhESVhMYitkYUowYjhnNTNFc3FGUVA2QlpySDhReURpZU96Sm9Db0hmOUs4NUFqZWpoM1pqL0FPL2V4YWQyZGpoNDR6VXkyVjFZOUhzb09uL25tdk85bEVXZms2QkFzOUxsT2RtT0FTQ2NOOXNZPSIsIm1hYyI6IjJkMjliOWM4Y2QxYWVlZWQ0ZGQ0MjZjMGQwNDM4NzMyOTEyMmU2ZmRiYjQxYzczZjNhZDY4OTI1YjFlNzgxNWMiLCJ0YWciOiIifQ%3D%3D; expires=Tue, 19 Jul 2022 05:04:06 GMT; Max-Age=7200; path=/; domain=127.0.0.1; httponly; samesite=lax'
    },
    [Symbol(headers map sorted)]: null
  }
}

System Info

System:
    OS: Linux 5.15 Ubuntu 22.04 LTS 22.04 LTS (Jammy Jellyfish)
    CPU: (4) x64 AMD Ryzen 3 3200U with Radeon Vega Mobile Gfx
    Memory: 2.02 GB / 5.75 GB
    Container: Yes
    Shell: 3.5.0 - /usr/bin/fish
  Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.22.18 - ~/.yarn/bin/yarn
    npm: 8.9.0 - /usr/local/bin/npm
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.62 
    @sveltejs/kit: next => 1.0.0-next.379 
    svelte: ^3.44.0 => 3.49.0 
    vite: ^3.0.0 => 3.0.2

Severity

serious, but I can work around it

Additional Information

Issue already reported but suggested solution didn't work for me #5327

[malinowskip]

I have also encountered this error and it seems to be an issue with Undici and the way it handles responses from the built-in PHP server or any other responses that don’t contain the content-length or transfer-encoding headers, causing a failure to read the response body: nodejs/undici#1414.

I have tested this by including a content-length header in the server response, which was then properly parsed by Undici.

[Rich-Harris]

Thanks for the sleuthing @malinowskip. I'm going to close this as the bug is in Undici, and there's basically nothing that can be done about it on the SvelteKit end except wait for nodejs/undici#1540 to be merged and released

[guilledll]

Thanks to both of you @Rich-Harris and @malinowskip , in that case i will wait for the node.js fix to be realeased. For the moment y won't explicity use ssr.

Just to comment, the Offerzen doc was amazing @Rich-Harris !! keep going that way.

[armin-salihovic]

I ran into this exact error as well. I came up with a solution that fixed this issue.

Instead of starting the Laravel's local development server using the Artisan command serve and using the url http://localhost:8000, run the Laravel application on a server such as XAMPP or NGINX, configure a local domain (e.g. example.test) and then use in the load() function.

I have used XAMPP during development on Windows, and NGINX on the production server.

I hope this helps someone too! :)