Using Directus SDK with svelte but not working in the load function

Question

I hope I can get some help. I have a sveltekit project that runs with directus as backend API. In my code I am using the directus API and ave been bringing in data in the script tag and recently learnt that I should use load functions to get SSR.

    onMount(async () => {


        
        await tick();

  
      while (!loginCompleteValue) {  // Check loginCompleteValue instead of loginComplete
    await new Promise(resolve => setTimeout(resolve, 1000));
  }

  try {
    // await initLogin();
    landingPageData = await client.request(readSingleton('landingpage'));
    console.log('Front page data:', landingPageData);

    // Fetch data from a collection
    projectData = await client.request(readItems('project'));
    console.log('project data:', projectData);
    clientprojectData = await client.request(readItems('clientprojects'));
    console.log('client project data:', clientprojectData);
    blogData = await client.request(readItems('blog', { limit: 3 }));
    console.log('blog data:', blogData);

    // After all data fetching and processing is done, set isLoading to false
    isLoading = false;
  } catch (error) {
    console.error('Error fetching data:', error);
  }
    });

all of this works correctly but when I tried to move the calls to +page.server.ts I tried syntax below:

    import { client, initLogin } from "$lib/config/initlogin";
import { readSingleton, readItems } from '@directus/sdk';

export async function load({ page, fetch, session, context }) {
  let landingPageData: any = null;
  let projectData: any[] = [];
  let clientprojectData: any[] = [];
  let blogData: any[] = [];

  try {
    landingPageData = await client.request(readSingleton('landingpage'));
    projectData = await client.request(readItems('project'));
    clientprojectData = await client.request(readItems('clientprojects'));
    blogData = await client.request(readItems('blog', { limit: 3 }));
  console.log(landingPageData);
    return {
      props: {
        landingPageData,
        projectData,
        clientprojectData,
        blogData
      
      }
    };
  } catch (error) {
    console.error('Error fetching data SSR:', error);
    return {
      status: 500,
      error: 'Internal server error'
    };
  }
}

I get error 500 this way. PLease help!