SvelteKit/Supabase Type 'Session | null' is not assignable to type 'Session'-CodePudding

tl:dr

This is the error I'm getting in VS Code:

let session: AuthSession
    Type 'Session | null' is not assignable to type 'Session'.
    Type 'null' is not assignable to type 'Session'.ts(2322)

This is the script code:

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

    onMount(() => {
        supabase.auth.getSession().then(({ data }) => {
            session = data.session;
        });

        supabase.auth.onAuthStateChange((_event, _session) => {
            session = _session;
        });
    });
</script>

Background info:

I'm trying to learn Sveltekit and Supabase, and I know that Sveltekit just released a breaking update, so I don't know if that's why I can't find any fixes to this, but I started with the Quickstart guide on Supabase.com and ran into issues with Sveltekit's routing, so I started a separate Sveltekit skeleton app and copied over the Supabase code from the quickstart project.

The frustrating thing is that it all works, but I'm getting the error above in all of my page.svelte pages on the line session = data.session; and session = _session;. Maybe it's an issue I've tried adding lines in src/app.d.ts to import the User and AuthSessions types, but that didn't affect it. I've also tried restarting VS Code, just to see if it was a typing issue in the app, but it's still there.

I'm sure it's something dumb, any and all help would be appreciated, thanks!

Oh, here's the package.json file, for versions:

{
    "name": "sveltekit-test",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "dev": "vite dev",
        "build": "vite build",
        "preview": "vite preview",
        "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
        "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
    },
    "devDependencies": {
        "@sveltejs/adapter-auto": "next",
        "@sveltejs/kit": "next",
        "svelte": "^3.44.0",
        "svelte-check": "^2.7.1",
        "svelte-preprocess": "^4.10.6",
        "tslib": "^2.3.1",
        "typescript": "^4.7.4",
        "vite": "^3.1.0"
    },
    "type": "module",
    "dependencies": {
        "@supabase/supabase-js": "^2.0.0-rc.10"
    }
}

CodePudding user response：

Since you are using asynchronous functions in onMount the immediate value of your session variable is null. Then eventually it will have a value that is satisfied by the Session type.

To make this more accurate change the type for your variable declaration to something like:

let session: AuthSession | null;

This would even work in the error case where you are not able to supply a session.