Use SvelteKit 1.0.0 to load data from The Movie Database with async - Approach 1: Using Loading data SvelteKit docs

+page.js

/** @type {import('./$types').PageLoad} */
export async function load() {
  const api_url = 'https://api.themoviedb.org/3/movie/popular?api_key=<your_api_key>&language=en-US&page=1'
  const response = await fetch(api_url)
  const data = await response.json()
  if (response.ok) {
    return {
      popular: data.results
    };
  } else {
    throw new Error(data);
  }
}

+page.svelte

<script lang="ts">
    /** @type {import('./$types').PageData} */  
    export let data: any;
    
    console.clear()
    // console.log(`popular_movies: ${JSON.stringify(data.popular)}`);
    console.log(`first_title: ${data.popular[0].title}`); 
    console.log(data.popular);
</script>

Instructions:

1. Place these 2 files in your primary routes folder.
2. In +page.js, replace <your_api_key> with your api key from The Movie Database (TMDB).

References:

YouTube: SvelteKit For Beginners | Movie App Tutorial

Loading data • Docs • SvelteKit

TMDB: API Documentation > Movies > Get Popular

npm list:

├── @playwright/test@1.25.0
├── @sveltejs/adapter-auto@1.0.0-next.64
├── @sveltejs/kit@1.0.0-next.427
├── @typescript-eslint/eslint-plugin@5.33.1
├── @typescript-eslint/parser@5.33.1
├── eslint-config-prettier@8.5.0
├── eslint-plugin-svelte3@4.0.0
├── eslint@8.22.0
├── prettier-plugin-svelte@2.7.0
├── prettier@2.7.1
├── svelte-check@2.8.1
├── svelte-preprocess@4.10.7
├── svelte@3.49.0
├── tslib@2.4.0
├── typescript@4.7.4
└── vite@3.0.9