Binding ClerkLoaded results in type error

[GodTamIt]

Simple example:

<script lang="ts">
    import ClerkLoaded from 'clerk-sveltekit/client/ClerkLoaded.svelte';
    import Clerk from '@clerk/clerk-js';

    let clerk: Clerk | null;

    $: {
        if (clerk?.user != null) {
            // Do something interesting
        }
    }
</script>

<ClerkLoaded bind:clerk />
//                ^^^^^
//  Type 'Clerk | null' is not assignable to type 'never'.

I'm doing this because I want to access clerk from Typescript/Javascript.

[wobsoriano]

When this PR gets merged, you should be able to subscribe to the Clerk store:

<script lang="ts">
    import { clerk, user } from 'clerk-sveltekit/client/store'

    $: console.log('user id', $clerk?.user.id)
    $: console.log('user id', $user?.id)
</script>

[GodTamIt]

@wobsoriano until then, do you know what the idiomatic thing to do today is, if you want to access the value in JS?

also, thanks for the heads up!

[wobsoriano]

You can do something like this:

let user
onMount(() => {
    window.Clerk.addListener((payload) => {
	user = payload.user
    })
})

But make sure Clerk is added to the window object before doing that. You have two options:

1. Wrap the component with <ClerkLoaded>
2. Hack and wait for window.Clerk. to be available (via intervals)