SvelteKit fetch issue

[acmacalister]

What version of Bun is running?

1.0.0+822a00c4d508b54f650933a73ca5f4a3af9a7983

What platform is your computer?

Darwin 22.6.0 arm64 arm

What steps can reproduce the bug?

When using SvelteKit fetch, it appears that it is clashing with the native/runtime fetch implementation of Bun. Clashing being defined that it seems to be missing request params like headers and such. For example. Take a PageLoad call.

import type { PageLoad } from './$types';

export const load: PageLoad = async ({ parent, fetch }) => {
    const { token } = await parent();
    const res = await fetch(`http://localhost:3000/v1/approvals`, {
        headers: {
            Authorization: `Bearer ${token}`
        }
    });

    const d = await res.json();

    return { approvals: d.data };
};

When sending to the server the request headers seen are:

{
  "accept": "*/*",
  "accept-encoding": "gzip, deflate",
  "connection": "keep-alive",
  "user-agent": "Bun/1.0.0"
}

A simple change to remove the PageLoad fetch, will result in proper headers being sent.

import type { PageLoad } from './$types';

export const load: PageLoad = async ({ parent }) => {
    const { token } = await parent();
    const res = await fetch(`http://localhost:3000/v1/approvals`, {
        headers: {
            Authorization: `Bearer ${token}`
        }
    });

    const d = await res.json();

    return { approvals: d.data };
};

request headers from the server:

{
  "accept": "*/*",
  "accept-encoding": "gzip, deflate",
  "authorization": "***",
  "connection": "keep-alive",
  "content-type": "application/json",
  "user-agent": "Bun/1.0.0"
}

What is the expected behavior?

Not sure what the expected behavior should be here. Presumably the SvelteKit fetch call would be used as it is part of the function scope?

What do you see instead?

No response

Additional information

Outside the unexpected behavior I think the major drawback of using the native/runtime fetch call is a change in behavior for SvelteKit apps coming from other JS runtimes. This will also prevent the use of SvelteKit HandleFetch hook. At the very least it might be helpful as documentation?

[machak]

might be related to #1987

[UnbreakableKid]

Having this exact issue.

Posted on discord a few days ago: https://discord.com/channels/876711213126520882/1149751402097291394

[aloker]

I think I'm running into this as well. In my case, even the verb gets lost (ie. sending a POST request ends up as a GET request).

Repro: https://github.com/aloker/bun-4718

• Add .env file with an entry EXTERNAL_API_URL with ie. a https://webhook.site/ endpoint
• Run app with bun run dev
• Open browser at http://localhost:5173
• Click the submit button - see how the request arrives at the end point as a POST request
• Now stop the dev server and start again as bun --bun run dev
• Click the submit button again - the request now shows up as a GET request/

[aleksasiriski]

I think I'm running into this as well. In my case, even the verb gets lost (ie. sending a POST request ends up as a GET request).

Repro: https://github.com/aloker/bun-4718

* Add .env file with an entry EXTERNAL_API_URL with ie. a https://webhook.site/ endpoint

* Run app with `bun run dev`

* Open browser at http://localhost:5173

* Click the submit button - see how the request arrives at the end point as a POST request

* Now stop the dev server and start again as `bun --bun run dev`

* Click the submit button again - the request now shows up as a GET request/

Same issue for me as well, using this

[OffBy0x01]

Whilst I agree this is an issue bun should solve, overriding a standard global function with a local function of the same name seems like a bit of an anti-pattern. If fetch had instead been called fetchFn we'd likely not see this issue here.

[aradalvand]

Any updates on this issue? It basically makes Bun unusable with SvelteKit.

[mihaipoenaru]

I have the same issue. Not a dealbreaker since I can still run everything just fine without '--bun' but it really should be fixed. It essentially kneecaps sveltekit.

[Jarred-Sumner]

If the Request is implemented as extending Request then it could be a bug where bun’s fetch is reading the properties off of the superclass instead of the object

We had time to investigate this properly yet

[mihaipoenaru]

@Jarred-Sumner Depending on the prio of this issue, maybe specify in the docs to avoid using --bun until this is fixed? It could cause a lot of headaches for a lot of unsuspecting devs.

[Bewinxed]

Yeah no way for me to use bun with svelte-kit at the moment due to this bug, any workarounds guys? :(

[mihaipoenaru]

@Bewinxed for me it just worked to not use --bun, so just do bun run your_script. Of course you can't use all the cool bun apis if you do that. Anyway I see that Jarred made a pull request for this, so fingers crossed it will be fixed in the next release.

[Bewinxed]

Well without -bun it’s just npm run dev at this point and other bun libs like elysia won’t work.

Hope it’s fixed cheers for the team

On Fri, 26 Apr 2024 at 2:27 PM Poenaru Mihai @.***> wrote:

@Bewinxed https://github.com/Bewinxed for me it just worked to not use --bun, so just do bun run your_script. Of course you can't use all the cool bun apis if you do that. Anyway I see that Jarred made a pull request for this, so fingers crossed it will be fixed in the next release.

— Reply to this email directly, view it on GitHub https://github.com/oven-sh/bun/issues/4718#issuecomment-2079202224, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACFY5BJEZBMTTORYN2D7JQDY7I22PAVCNFSM6AAAAAA4RTHG2GVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDANZZGIYDEMRSGQ . You are receiving this because you were mentioned.Message ID: @.***>

[mihaipoenaru]

@Jarred-Sumner

Maybe I'm not doing it right, but it still doesn't work for me. Here is my minimal +page.server.ts reproducer(same one as in my duplicate issue #9846)

import type { PageServerLoad } from './$types';

export const load = (async () => {
    console.log('normal fetch')
    console.log(await (await fetch('https://httpbin.org/headers', {
        headers: {
            'Authorization': 'bearer asdf'
        }
    })).json())

    console.log('fetch request body')
    const req = new Request('https://httpbin.org/headers');

    req.headers.set('Authorization', 'bearer asdf');
    console.log(req);

    console.log(await (await fetch(req)).json());
}) satisfies PageServerLoad

With it I get this:

normal fetch { headers: { Accept: "/", "Accept-Encoding": "gzip, deflate, br", Authorization: "bearer asdf", Host: "httpbin.org", "User-Agent": "Bun/1.1.7", "X-Amzn-Trace-Id": "Root=1-663c7e27-07887d0b5cea8c3412ff9fb4", }, } fetch request body Request (0 KB) { method: "GET", url: "https://httpbin.org/headers", headers: Headers { "authorization": "bearer asdf", } } { headers: { Accept: "/", "Accept-Encoding": "gzip, deflate, br", Host: "httpbin.org", "User-Agent": "Bun/1.1.7", "X-Amzn-Trace-Id": "Root=1-663c7e28-60a5fc8247b516b516c1b361", }, }

Note that the authentication header is missing from the second fetch. However, this works if I first build the project then run it with bun --bun run preview. I'll reopen my issue since this one is closed.