I'm very new to sveltkit. Just followed supabase-svelte app refered to this link. The supabased examples work good as it says.

Now I tried another things like routing reffering the official doc. It seems pretty easy and simple but not working for me.

This is my src structure

and the +page.svelte :

<h1>About this site</h1>
<p>TODO...</p>
<a href="/">Home</a>

And when I access to http://localhost:5173/about, it just seems main App.svelte.

This is my App.svelte just same as supabase-svelte app.

<script lang="ts">
    import { onMount } from 'svelte'
    import { supabase } from './supabaseClient'
    import type { AuthSession } from '@supabase/supabase-js'
    import Account from './lib/Account.svelte'
    import Auth from './lib/Auth.svelte'
  
    let session: AuthSession | null
  
    onMount(() => {
      supabase.auth.getSession().then(({ data }) => {
        session = data.session
      })
  
      supabase.auth.onAuthStateChange((_event, _session) => {
        session = _session
      })
    })
  </script>
  
  <div class="container" style="padding: 50px 0 100px 0">
    {#if !session}
    <Auth />
    {:else}
    <Account {session} />
    {/if}
  </div>

I googled a lot, but coudln't find anything helpful..

I'm very new to sveltkit. Just followed supabase-svelte app refered to this link. The supabased examples work good as it says.

Now I tried another things like routing reffering the official doc. It seems pretty easy and simple but not working for me.

This is my src structure

and the +page.svelte :

<h1>About this site</h1>
<p>TODO...</p>
<a href="/">Home</a>

And when I access to http://localhost:5173/about, it just seems main App.svelte.

This is my App.svelte just same as supabase-svelte app.

<script lang="ts">
    import { onMount } from 'svelte'
    import { supabase } from './supabaseClient'
    import type { AuthSession } from '@supabase/supabase-js'
    import Account from './lib/Account.svelte'
    import Auth from './lib/Auth.svelte'
  
    let session: AuthSession | null
  
    onMount(() => {
      supabase.auth.getSession().then(({ data }) => {
        session = data.session
      })
  
      supabase.auth.onAuthStateChange((_event, _session) => {
        session = _session
      })
    })
  </script>
  
  <div class="container" style="padding: 50px 0 100px 0">
    {#if !session}
    <Auth />
    {:else}
    <Account {session} />
    {/if}
  </div>

I googled a lot, but coudln't find anything helpful..

• svelte
• sveltekit

Share Improve this question Follow edited Nov 21, 2024 at 2:40 brunnerh 186k3030 gold badges357357 silver badges430430 bronze badges asked Nov 21, 2024 at 0:22 DeckardDeckard 1,43366 gold badges3434 silver badges6262 bronze badges 2

• Please do not upload images of code/data/errors. – brunnerh Commented Nov 21, 2024 at 2:08
• @brunnerh Sorry, just updated it. – Deckard Commented Nov 21, 2024 at 2:16

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

The linked guide does not create a SvelteKit application but a basic Vite + Svelte project. I.e. there is no routing just nested components (hence there is an App.svelte which does not exist in SvelteKit).

Either start from an actual SvelteKit project (which can be created via the sv CLI) or add the necessary packages and configs after the fact.

You will need various packages:

• @sveltejs/adapter-auto (default adapter, can be swapped depending on deployment target)
• @sveltejs/kit
• @sveltejs/vite-plugin-svelte

A svelte.config.js along these lines:

import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    // for e.g. SCSS support in style tags
    preprocess: vitePreprocess(),
    kit: {
        adapter: adapter()
    }
};

export default config;

And the SvelteKit plugin needs to be added in the vite.config.js/ts:

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig((cfg) => ({
  plugins: [
    sveltekit(),
  ],
}));

A src/app.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="icon" href="%sveltekit.assets%/favicon.png" />
        <meta name="viewport" content="width=device-width" />
        %sveltekit.head%
    </head>
    <body data-sveltekit-preload-data="hover">
        <div style="display: contents">%sveltekit.body%</div>
    </body>
</html>

For TS support, you would want to extend a generated config file in the tsconfig.json:

{
    "extends": "./.svelte-kit/tsconfig.json",
    "compilerOptions": { ... }
}

Maybe even more files that I fot; would recommend creating a new project or referencing one if in doubt.