Sveltekit with PocketBase - Cannot use relative URL with global fetch...

[ArthurTimofey]

Dear Svelte Community,

I'm currently having issues with implementing authentication using PocketBase in a SvelteKit project. I'm using the following code for authentication:

src/routes/login/+page.server.ts

import { error, redirect } from '@sveltejs/kit';
import type { Actions } from './$types';

export const actions = {
	login: async ({ locals, request }) => {
		const { email, password } = Object.fromEntries(await request.formData()) as {
			email: string;
			password: string;
		};

		try {
			await locals.pb.collection('users').authWithPassword(email, password);
		} catch (e) {
			console.error(e);
			throw e;
		}

		throw redirect(303, '/');
	}
} satisfies Actions;

However, when I try to login, I get the following error message:

Cannot use relative URL (/api/collections/users/auth-with-password) with global fetch — use `event.fetch` instead: https://kit.svelte.dev/docs/web-standards#fetch-apis

I'm not sure what the issue is, as I've used similar code in a previous project that worked fine. I'm wondering if anyone has experienced a similar issue with PocketBase and SvelteKit, and if so, how they were able to resolve it.

Any help or suggestions would be greatly appreciated. Thank you!

[gabinpoa]

@ArthurTimofey I just had the same issue and it turned out to be in how I was using my environment variables. Instead of declaring it like this PB_URL="https://somepocketbaseurl", you would want to use VITE_PB_URL (more here).
And then in your src/hooks.server.ts:
event.locals.pb = new PocketBase(import.meta.env.VITE_PB_URL);
This worked for me, I hope it helps you :).

[ArthurTimofey]

You are my hero @gabinpoa!

Thank you so much! I can't believe I missed that, makes so much sense since the PB is executed on client side rather then on server side!

Wishing you a great week ahead <3

[eltigerchino]

also see the Kit docs for public / private and static / dynamic environment variables.

Dynamic (values can change while server is running):
https://kit.svelte.dev/docs/modules#$env-dynamic-private
https://kit.svelte.dev/docs/modules#$env-dynamic-public

Static (set once during build):
https://kit.svelte.dev/docs/modules#$env-static-private
https://kit.svelte.dev/docs/modules#$env-static-public

[SaiedWork]

I just had the same issue while the same code and setup was used hours before without any issues.
After further investigation, it was just a semicolon after the url in the .env file.
By removing the semicolon it worked just fine again.

// error:
PUBLIC_POCKETBASE_URL='http://127.0.0.1:8090';

// no error:
PUBLIC_POCKETBASE_URL='http://127.0.0.1:8090'

[stijnbakk]

Thanks a lot! Had exactly the same error :-)

[potatotomatobanana]

I faced the same problem with this error:

Error: Cannot use relative URL ... with global fetch — use event.fetch instead: https://kit.svelte.dev/docs/web-standards#fetch-apis.

The issue was that the URL lacked https://; it was simply example.com.