2

I have a very basic sveltekit project(:3000) with a simple route structure that consumes a backend(:5000):

├── ./src
│   ├── ./src/app.html
│   ├── ./src/routes
│   │   ├── ./src/routes/index.svelte
│   │   ├── ./src/routes/__layout.svelte
│   │   └── ./src/routes/view
│   │       ├── ./src/routes/view/[id].svelte
│   │       └── ./src/routes/view/index.svelte

Imagine a listing of companys in routes/index.svelte which prefetches on hovering the data of the listed companys with <a sveltekit:prefetch href="/view/${company._id}">...</a>.

In Chrome devtools it shows that this is working correctly, with http://localhost:5000/company/6203a1d7c36d6f78f5979f26. Yet for some reason, as soon as I click the link, sveltekit is fetching for http://localhost:3000/view/favicon.png, which obviously does not exists, because it is living in app/src/static/favicon.png.

Does anybody have ever seen this? Am I missing an obvious point on how to handle static assets that are called by subpaths? Or rather: why is the subpath route even calling a root asset?

Code for /routes/view/[id].svelte:

<script context="module" lang="ts">
    export const load = async ({ fetch, params }) => {
        const id = params.id;    
        const url = `http://localhost:5000/company/${id}`;
 
        const res: Response = await fetch(url);
        const company = await res.json();
        
        if (res.ok) {
            return { props: {company} }
        }

        return { status: res.status }
    }
</script>

<script lang="ts">
    export let company: Company;
</script>

<h1>{company.name}</h1>
...

The /routes/view/index.svelte file should not be a problem, that handles a simple redirection:

<script context="module" lang="ts">
    export async function load() {
        return {
            status: 302, redirect: "/"
        }
    }
</script>

<script>
    load();
</script>
andylib93
  • 133
  • 8

3 Answers3

3

This is usually caused when the code inside app.html uses favicon.png instead of /favicon.png which makes sveltekit looks for the favicon in the subpath it's currently at. Here's an example:


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <!-- Make sure there is a leading slash (/) to tell it to look in the root path --> 
        <link rel="icon" href="/favicon.png" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />

        %svelte.head%
    </head>
    <body>
        <div id="svelte">%svelte.body%</div>
    </body>
</html>

This happened to me so many times.

And on newer versions of sveltekit, inside the app.html, they have standardized this:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="description" content="Svelte demo app" />
        <!-- Notice the %svelte.assets% -->
        <link rel="icon" href="%svelte.assets%/favicon.png" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        %svelte.head%
    </head>
    <body>
        <div>%svelte.body%</div>
    </body>
</html>
Joshua Q
  • 635
  • 5
  • 18
  • Unfortunately my `app.html` looks like the second example with `href="%svelte.assets%/favicon.png"`. – andylib93 Feb 11 '22 at 07:29
  • 1
    ..... somehow, someway (due to a [current](https://stackoverflow.com/questions/71073107/does-anyone-know-nay-fix-for-this-error-typeerror-cannot-assign-to-read-only-p/71073989) mongoose problem, I downgraded nodejs to v16.1.40) and it works without a problem ️ – andylib93 Feb 11 '22 at 07:50
2

I've the same problem, insert if statement to check 'favicon.png' as following.

<script context="module">
    import { get } from '$lib/utils';

    export async function load({ params, session, fetch }) {
        const { id } = params;
        console.log('load params id', id);
        if (id === 'favicon.png') {
            return { redirect: '/', status: 302 };
        }
        const response = await get(`/assets/${id}`, null);
        // console.log('load response', response);

        const asset = response.success ? response.data : { name: '', category: '', member: '' };

        return {
            status: response.status,
            props: { ...{ asset, id } }
        };
    }
</script>
The Coding Fox
  • 1,488
  • 1
  • 4
  • 18
Alex Hojong Lee
  • 21
  • 2
1

href="%svelte.assets%/favicon.png"- I added a slash to this line and the error went away - href="/%svelte.assets%/favicon.png"

Дмитрий Костюнин
  • 21
  • 3
  • 1
    Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Aug 17 '22 at 12:01