Why does "Select.svelte" appear on Sveltekit [slugs] params?

[ichwanulfadhli]

I'm currently developing a form page which has Svelte Select in it.

Here the example of the page code: +page.svelte

<form method="POST" bind:this={forms} use:enhance>
    <Select 
        name="select" 
        on:change={()=> forms.requestSubmit()}
        showChevron={true}
        class="dark:!text-white dark:!bg-gray-700 !bg-gray-50"
        placeholder="Pilih atau cari nama sekolah"
        items={items}
    />
</form>

In order to display the items on to the <Select /> component, I loaded them in the +page.server.ts file +page.server.ts

import environment from '$src/lib/services/environment';

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

export const load: PageServerLoad = async ({ fetch, params }) => {
    console.log(params);

    const res = await fetch(`${environment.apiUrl}/dashboard/${params.halaman}`);
    const item = await res.json();

    return { item };
};

Here's the thing. When the page is loaded, it's giving me an error SyntaxError: Unexpected token < in JSON at position 0. I console log the params argument and it shows this

Even though I got an error, the <Select /> component is still displaying the data.

When I navigate to other page, and back again to this page, the [slugs] is back to normal as it should be

Any idea why or how to solve this? Thank you