Sveltekit <Page> was created without expected prop in SvelteKit During Prop Passing, data is successfully fetched on the server side

Question

issue: The console log on the server side shows that the profile data is fetched successfully. However, the client-side component logs "Profile is not available or loading." and doesn't render the profile data. The developer console in the browser shows " was created without expected prop 'profileData'".

I've tried validating the data structure and ensuring that the prop names match in both the server and client scripts.

Question: How can I ensure that the profileData prop is successfully passed from the server to the client in SvelteKit? What might be causing this discrepancy in prop passing?

Any insights or suggestions would be greatly appreciated!

+PAGE.SERVER.TS

import { error, type Load } from '@sveltejs/kit';
import type { profileData } from '$lib/types/Stats';
import { fetchProfileByUsername } from '$lib/api';

export const load: Load = async ({ params }) => {
  const username = params.username;
  console.log("Fetching profile for username:", username);

  if (!username) {
    throw error(400, 'Username is required');
  }

  try {
    const profileData = await fetchProfileByUsername(username);
    console.log("Fetched profile data for debugging:", profileData); // Enhanced log

    if (!profileData) {
      throw error(404, 'Profile not found');
    }

    // Choose either context or props approach:
    // return { context: { profileData } }; // For context passing
    return { props: { profileData } }; // For prop passing
  } catch (e) {
    console.error('Error fetching profile:', e);
    throw error(500, 'Internal Server Error');
  }
};

+PAGE.SVELTE

<script lang="ts">
  import type { profileData } from '$lib/types/Stats';

  // Receive profileData as a prop
  export let profileData: profileData ;

  $: if (profileData) {
    console.log("Profile loaded:", profileData);
    // ... render profile details
  } else {
    console.log("Profile is not available or loading.");
    // ... render loading state
  }
</script>

{#if profileData}
  <h1>{profileData.name}</h1>
  <p>{profileData.bio}</p>
  <!-- Additional profile details here -->
{:else}
  <p>Loading profile...</p>
{/if}

route is profile/[username]/ I'm working on a SvelteKit app with dynamically generated profile pages using +page.server.ts and +page.svelte. I'm fetching profile data using an API call, but it's not loading into the component.

The data is successfully fetched on the server side, as seen in the logs. I've tried passing data using both props and context, but the component still renders "Loading profile..." indefinitely.