fetch from *.svelte (e.g. in button click) triggers repeated console warning not to use window.fetch

[m1027]

Describe the bug

Since some recent sveltekit versions I am getting repeatedly the following developer warning in the browser console:

Loading /api/test?id=123 using window.fetch. For best results, use the fetch that is passed to your load function: https://kit.svelte.dev/docs/load#making-fetch-requests

This is triggered by a simple fetch('/api/test') from +page.svelte, after page load, so to reproduce place such a fetch() call in to a button click.

I am facing the exact same issue as in the mentioned in this stackoverflow link: https://stackoverflow.com/questions/74700331/how-to-fetch-endpoint-data-in-sveltekit-after-initial-load

Sidenote: Other than stated on stackoverflow, changing the GET request into PUT does not avoid the message. Sidenote 2: In the stackoverflow comments it is assumed to be a bug / false positive. Sidenote 3: Yes, as stated in the comments, it might be necessary to make the browser reload the page to trigger this.

Summary: There seems to be NO way at all to fetch() currently without getting this message repeatedly.

Reproduction

Sorry, no full demo code repository yet, but this explains it all in detail incl. code: https://stackoverflow.com/questions/74700331/how-to-fetch-endpoint-data-in-sveltekit-after-initial-load

Logs

No response

System Info

System:
    OS: Linux 6.0 Gentoo Linux
    CPU: (4) x64 Intel(R) Core(TM) i5-8350U CPU @ 1.70GHz
    Memory: 12.92 GB / 15.51 GB
    Container: Yes  [WRONG REPORT? THERE IS NO CONTAINER]
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 18.12.1 - /usr/bin/node
    npm: 8.19.2 - /usr/bin/npm
  Browsers:
    Firefox: 107.0.1
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.90 
    @sveltejs/adapter-node: ^1.0.0-next.100 => 1.0.0-next.102 
    @sveltejs/kit: next => 1.0.0-next.572 
    svelte: ^3.44.0 => 3.54.0 
    vite: ^3.1.0 => 3.2.5

Severity

annoyance

Additional Information

No response

[stalkerg]

yeah, the same... I understand that in most cases the main fetch should be in the load function but not true for everything.

[lukasfri]

Same here. I'm using WebAssembly and as such, I'm fetching the .wasm binary on the client side after page load, but svelte keeps yelling at me. Having a way to disable this warning for parts of your code should be available. This warning is very useful for new people, but it's very annoying when you want to try without training wheels.

[fokoenecke]

Hi, I am the author of the stackoverflow question. Thank you for creating this issue! I just made a small repository demoing the problem: https://github.com/fokoenecke/fetch-warning

I switched to the most recent svelte/kit versions (1.0.1 / 3.55.0). And sidenode 1 seems to be correct. I was not able to stop the message from showing by switching the HTTP method.

[markjaquith]

The issue seems to be the heuristic that checks if (new Error().stack) includes a check_stack_trace member — but in Firefox, it always seems to include it.

I don't get the warning in Chrome, which doesn't have check_stack_trace member.

Can anyone else verify that?

[fokoenecke]

I can confirm. I'm not getting the warning in Chrome Version 108.0.5359.124 (Official Build) (arm64)

[geoffrich]

This still appears to be happening in Firefox (tested in 108 on Mac).

Repro (from #8627): https://stackblitz.com/edit/sv-bug-fetch-demo

I was able to repro myself on a fresh project (Kit 1.2.1) by simply adding the following to the demo app's root +page.svelte:

<script>
  import Counter from "./Counter.svelte";
  import welcome from "$lib/images/svelte-welcome.webp";
  import welcome_fallback from "$lib/images/svelte-welcome.png";
  import { onMount } from "svelte";

  onMount(() => {
    fetch("https://svelte.dev");
  });
</script>

[markjaquith]

Confirmed, even when running this project locally (so it's not a Stackblitz thing).

'*listen@' isn't present in stack_array members for me:

This is what stack_array contains for me:

[
  "window.fetch@http://127.0.0.1:5173/node_modules/@sveltejs/kit/src/runtime/client/fetcher.js?v=11651678:31:46",
  "instance/<@http://127.0.0.1:5173/src/routes/Fetcher.svelte:75:20",
  "run@http://127.0.0.1:5173/node_modules/.vite/deps/chunk-K6MJRMI7.js?v=11651678:19:10",
  "mount_component/<@http://127.0.0.1:5173/node_modules/.vite/deps/chunk-K6MJRMI7.js?v=11651678:1708:52",
  "flush@http://127.0.0.1:5173/node_modules/.vite/deps/chunk-K6MJRMI7.js?v=11651678:1003:9",
  "init@http://127.0.0.1:5173/node_modules/.vite/deps/chunk-K6MJRMI7.js?v=11651678:1789:5",
  "Root@http://127.0.0.1:5173/.svelte-kit/generated/root.svelte:633:7",
  "createProxiedComponent@http://127.0.0.1:5173/node_modules/svelte-hmr/runtime/svelte-hooks.js?v=11651678:341:9",
  "ProxyComponent@http://127.0.0.1:5173/node_modules/svelte-hmr/runtime/proxy.js?v=11651678:242:29",
  "Proxy<Root>@http://127.0.0.1:5173/node_modules/svelte-hmr/runtime/proxy.js?v=11651678:349:11",
  "initialize@http://127.0.0.1:5173/node_modules/@sveltejs/kit/src/runtime/client/client.js?v=11651678:375:10",
  "_hydrate@http://127.0.0.1:5173/node_modules/@sveltejs/kit/src/runtime/client/client.js?v=11651678:1643:14",
  "async*start@http://127.0.0.1:5173/node_modules/@sveltejs/kit/src/runtime/client/start.js:38:16",
  "@http://127.0.0.1:5173/:19:9",
  ""
]

[xiaohk]

I have the same issue in Firefox (110.0b2). Is there a way to suppress this warning?

[rif]

I am having this issue on chromium 110.0.5481.100 (Official Build) Arch Linux (64-bit) but it looks like the warning is only showing up in dev (not showing on built deploy)

[khromov]

I'm having this warning (only when fetch is used inside a .svelte component) when using npm run dev in a Capacitor app.

[dp1140a]

I am getting the same warnings but in Chrome. I created a separate *.js file under $lib that i use across multiple components. My whole app is client side and embedded in a GoLang app that runs the backend.

[ghost]

I am getting the same warnings but in Chrome. I created a separate *.js file under $lib that i use across multiple components. My whole app is client side and embedded in a GoLang app that runs the backend.

Hi! Just check parameters of load function: for it is passed object including fetch function. You need actually use this argument as fetch and it will call at SSR stage without browser console warning.

export const load: PageLoad = async ({ **fetch** }) => {...}

from the docs https://kit.svelte.dev/docs/load#making-fetch-requests see last list option.

[m1027]

@creamsodainyourmouth: Thanks. In my case I need to call fetch e.g. from a button click. So currently I don't see how to replace the native fetch() with svelte's fetch() in such cases.