kit: Cannot use relative URL with global fetch in .svelte file

I had this same problem and just didn’t understand. It seems like the conversation was over my head. The error message says ‘use event.fetch instead’ and the linked page never references ‘event’. The parameter passed to ‘load()’ is actually event, but all the examples I’ve seen use destructuring and I didn’t know the parameter was called ‘event’, or that it had a ‘fetch’ property since I had only seen ‘params’ destructured (i.e. event.params). I believe this is what using ‘event.fetch’ means:

export async function load({ params, fetch }) { // <--- event.params and event.fetch
  fetch('/realative/url') // parameter hides normal fetch() function
}

As I load the data initially with PageServerLoad (https://kit.svelte.dev/docs/load#page-data), I for my part do not need to do a fetch in a svelte component while it is rendered server side. But I do need to do a fetch later on, which will only be on client side. My solution was to wrap it with the browser environment variable from sveltekit.

import { browser } from "$app/environment";

if (browser) {
  const res = await fetch(
    // url
  );
  data = await res.json();
}

With this I did not get the error “Cannot use relative URL (…) with global fetch”.

Just writing it as this may help some others reading this.

how to fetch in the load function is described here: https://kit.svelte.dev/docs/load#making-fetch-requests

I loaded a small set of items via page.js and then tried to load more on intersecting when i run in to this error. edit: it worked well while just intersecting. but then i added a filter section (filter acts on +server.js) it was working when klicking the navbar link, but not on page reload

import { browser } from "$app/environment";

if (browser) {
  const res = await fetch(
    // url
  );
  data = await res.json();
}

This was the solution for me as well, thank you Zerdayne

@kegesch judging from the code snippet this could never have worked, you would have gotten a different error (which is generic and therefore we added a more descriptive error in #8370), but you would have gotten an error.

@amr3k your case is interesting. Using {#await ..} like that on the server does swallow the error, which is why it worked for you before - but probably not the way you expected it. On the server, {#await ..} is not actually awaited, instead you fire off a request which is ignored (or in your case, previously errored because the URL is invalid).

Both of your use cases sound like you maybe are not interested in server side rendering at all? In this case you can turn your SvelteKit app into an SPA by adding export const ssr = false to a root +layout.js file.

I had this same problem and just didn’t understand. It seems like the conversation was over my head. The error message says ‘use event.fetch instead’ and the linked page never references ‘event’. The parameter passed to ‘load()’ is actually event, but all the examples I’ve seen use destructuring and I didn’t know the parameter was called ‘event’, or that it had a ‘fetch’ property since I had only seen ‘params’ destructured (i.e. event.params). I believe this is what using ‘event.fetch’ means:

export async function load({ params, fetch }) { // <--- event.params and event.fetch
  fetch('/realative/url') // parameter hides normal fetch() function
}

is this fixed? or is it on different issue since this issue is closed