CODEWITHSUNDEEP
sveltekit
andylib93
andylib93

Reputation: 163

Why is sveltekit fetching for favicon.png in subpath?

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>

Upvotes: 2

Views: 4850

Answers (4)

Dave Nash
Dave Nash

Reputation: 1

I was able to fix this by correcting the file extension on my favicon link. I had favicon.svg in /static, but my app.html still had

<link rel="icon" href="/%sveltekit.assets%/favicon.png" />

Upvotes: 0

Дмитрий Костюнин
Дмитрий Костюнин

Reputation: 31

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

Upvotes: 2

Alex Hojong Lee
Alex Hojong Lee

Reputation: 21

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>

Upvotes: 2

Joshua Q
Joshua Q

Reputation: 774

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>

Upvotes: 3

Related Questions