Requesting a non-SvelteKit API endpoint on localhost from __layout causes an error

Describe the bug

When I add the following code to my top-level __layout.svelte file, I get a strange error.

<script context="module">
  export async function load({ fetch }) {
    try {
      const response = await fetch("http://localhost:8000/api/calendars");
      return {};
    } catch (err) {
      console.log(err);
      return {
        status: 500,
        error: "Error when talking to the server. Please try again.",
      };
    }
  }
</script>

<main>
  <slot />
</main>

Error:

FetchError: request to http://localhost:8000/api/calendars failed, reason: connect ECONNREFUSED ::1:8000
    at ClientRequest.<anonymous> (file:///Users/kevin/Workspace/sw-repro/node_modules/@sveltejs/kit/dist/install-fetch.js:6246:11)
    at ClientRequest.emit (node:events:390:28)
    at Socket.socketErrorListener (node:_http_client:442:9)
    at Socket.emit (node:events:390:28)
    at emitErrorNT (node:internal/streams/destroy:164:8)
    at emitErrorCloseNT (node:internal/streams/destroy:129:3)
    at processTicksAndRejections (node:internal/process/task_queues:83:21) {
  type: 'system',
  errno: 'ECONNREFUSED',
  code: 'ECONNREFUSED',
  erroredSysCall: 'connect'
}

My backend is running on localhost port 8000, and requests made to http://localhost:8000/api/calendars do work fine; they result in a 200 with some JSON content. No problem whatsoever. It also all works fine when I run my SvelteKit site with npm run dev, I only get the error when I npm run build && npm run preview.

If I change the URL to a non-localhost one (for example https://api.critical-notes.com/api/calendars), then the error doesn’t happen. It also doesn’t happen with a SvelteKit endpoint URL, for example if I add /routes/endpoint.js and change the URL to http://localhost:3000/endpoint, no error.

It only happens when the fetch is made from SSR: if I disable SSR then the error doesn’t happen.

Reproduction

I do have a repo here but it’s not super useful without some kind of external backend running on localhost 😬

Logs

No response

System Info

System:
    OS: macOS 12.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 2.25 GB / 32.00 GB
    Shell: 3.3.1 - /opt/homebrew/bin/fish
  Binaries:
    Node: 17.3.0 - /opt/homebrew/bin/node
    npm: 8.3.0 - /opt/homebrew/bin/npm
  Browsers:
    Edge: 96.0.1054.62
    Safari: 15.2
  npmPackages:
    @sveltejs/adapter-node: next => 1.0.0-next.59
    @sveltejs/kit: next => 1.0.0-next.213
    svelte: ^3.44.0 => 3.44.3

Severity

serious, but I can work around it

Additional Information

npm run dev works and the actual production server works, but it’s now very hard for me to test my SvelteKit site using npm run preview, since the initial page load is always causing an error, which is shown using __error.svelte.

[stalkerg]

@bluwy I hope you can close this issue. It’s basically @kevinrenskers misunderstanding what on MacOs the localhost resolved into ::1 by default if application support ipv6. @kevinrenskers is running a separate backend, and it probably does not support ipv6, and it’s not a SvelteKit issue at all.

[bluwy]

Perhaps a misconfiguration in /etc/hosts 🤔I believe the requests was made to localhost by node, but the system (macos) decides that ::1:8000 should respond. Or maybe the backend server should listen on the ipv6 address too. I’m not sure if SvelteKit is the one explicitly requesting ::1:8000 though. These are just my wild guesses though.