CODEWITHSUNDEEP
javascriptwebsveltekit
Varun Poondi
Varun Poondi

Reputation: 9

Sveltekit load function issue

I'm new to the web dev scene and I started learning svelte. I'm currently watching a tutorial on sveltekit. I trying to load a function before the page renders to the user, but I'm getting this error.

page in load functions has been replaced by url and params
Error: page in load functions has been replaced by url and params
at Object.get (file:///Users/username/Documents/Projects/Web%20Development/my-pokadex/node_modules/@sveltejs/kit/dist/chunks/index.js:1084:12)
    at load ([id].svelte:2:36)
    at load_node (file:///Users/username/Documents/Projects/Web%20Development/my-pokadex/node_modules/@sveltejs/kit/dist/chunks/index.js:1094:30)
    at respond$1 (file:///Users/username/Documents/Projects/Web%20Development/my-pokadex/node_modules/@sveltejs/kit/dist/chunks/index.js:1296:21)
    at async render_page (file:///Users/username/Documents/Projects/Web%20Development/my-pokadex/node_modules/@sveltejs/kit/dist/chunks/index.js:1487:19)
    at async resolve (file:///Users/username/Documents/Projects/Web%20Development/my-pokadex/node_modules/@sveltejs/kit/dist/chunks/index.js:1641:10)
    at async respond (file:///Users/username/Documents/Projects/Web%20Development/my-pokadex/node_modules/@sveltejs/kit/dist/chunks/index.js:1607:20)
    at async file:///Users/username/Documents/Projects/Web%20Development/my-pokadex/node_modules/@sveltejs/kit/dist/chunks/index.js:1937:24

This is the code that is giving me this error

<script context="module">
    export async function load({page}) {
        const id = page.params.id;
        const url = `https://pokeapi.co/api/v2/pokemon/${id}`;
        const res = await fetch(url);
        const pokeman = await res.json();
        return {props: {pokeman}};
    }
</script>
<script>
    export let pokeman;
</script>
<h1>{pokeman.name}</h1>

My Dependencies

package.json

{
  "name": "my-pokadex",
  "version": "0.0.1",
  "scripts": {
    "dev": "svelte-kit dev",
    "build": "svelte-kit build",
    "package": "svelte-kit package",
    "preview": "svelte-kit preview",
    "lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
    "format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
  },
  "devDependencies": {
    "@sveltejs/adapter-auto": "next",
    "@sveltejs/kit": "next",
    "autoprefixer": "^10.4.2",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-svelte3": "^3.2.1",
    "prettier": "^2.4.1",
    "prettier-plugin-svelte": "^2.4.0",
    "svelte": "^3.44.0",
    "tailwindcss": "^3.0.15"
  },
  "type": "module"
}

The tutorial I'm following: https://www.youtube.com/watch?v=UU7MgYIbtAk&t=3010s @ 47:31

Upvotes: 0

Views: 2585

Answers (1)

OmG3r
OmG3r

Reputation: 1811

the error states page in load functions has been replaced by url and params a quick search in the documentation as noted here

yields this snippet

export async function load({ params, fetch, session, stuff }) {
    const url = `/blog/${params.slug}.json`;
    const res = await fetch(url);

    if (res.ok) {
        return {
            props: {
                article: await res.json()
            }
        };
    }

    return {
        status: res.status,
        error: new Error(`Could not load ${url}`)
    };
}

you can directly use the params within load()

you can refactor your code to

<script context="module">
    export async function load({params}) {
        const id = params.id;
        const url = `https://pokeapi.co/api/v2/pokemon/${id}`;
        const res = await fetch(url);
        const pokeman = await res.json();
        return {props: {pokeman}};
    }
</script>
<script>
    export let pokeman;
</script>
<h1>{pokeman.name}</h1>

Upvotes: 1

Related Questions