sveltesveltekit

SvelteKit routing not working ('/src/routes/about/+page.svelte' not mapped to '/about')

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

enter image description here

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..

Solution

  • 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:

    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 forgot; would recommend creating a new project or referencing one if in doubt.