Sveltefire with SvelteKit?

[pietz]

I'm transitioning my current project from a simple Svelte App to use SvelteKit and its project structure. After fiddling around I finally managed to import firebase successfully but I keep striking out when it comes to Sveltefire. Everything inside the FirebaseApp component will simply not show.

Is there a quick way to fix this? I'm not sure what else to post here because I don't know where the problem originates. Would it make sense to set up a SvelteKit template for Sveltefire?

I'm still a Svelte and Firebase beginner. I apologize if my question is stupid.

Thanks

[codediodeio]

This should be fixed in the latest version. Keep in mind, SvelteFire does not fetch on the server. What you should do is fetch on the server via SvelteKit's load function, then use the result with startWith

// Data fetched via server
export let data: PageData;

// Just give the store a startWith value 
const store = docStore(db, 'posts/test', data.thing);

// Or 

<Doc {ref} startWith={data.thing} />

[Schmell]

Like @pietz I would love to use this in SvelteKit. Currently when using an example from the docs I get SyntaxError: Function statements require a function name and Auth is not initialized on not in browser in the console. (Edit: I made a new project and the syntax error is gone)

In your recent video it appears that you are using SvelteKit and there is no indication that one would need to do anything different than what's in the docs.

Maybe I haven't set it up properly? Do I need the svelte-adapter-firebase, because currently I am having trouble getting that to work due to some breaking changes in SvelteKit 1.0 EDIT: Im not sure what is wrong with the other project i created, but i got everything working

I am still interested in this though -- I find the example above is a bit of a head scratcher. What are you supposed to return from +page.server.ts i.e what is - data.thing?? I thought that docStorewas fetching from firestore?

I didn't really want to create an issue here, maybe set up discussions for these type of problems

[Schmell]

I am still getting Firestore is not initialized or not in browser and SyntaxError: Function statements require a function name in the console on a new project It doesn't seem to matter whether I try to import (initilaize) in a +page.svetle or +page.ts 0r +page.server.ts.

[Kimeiga]

Still having issues figuring out how to use this with sveltekit; I'm getting

Auth is not initialized on not in browser

I tried to modify the standard sveltefire-template example on github as follows:

<script>
    // @ts-nocheck

    import { FirebaseApp, User, Doc, Collection } from 'sveltefire';

    // import firebase from 'firebase/app';
    // import 'firebase/firestore';
    // import 'firebase/auth';
    // import 'firebase/performance';
    // import 'firebase/analytics';

    import { initializeApp } from 'firebase/app';
    import { getFirestore } from 'firebase/firestore';
    import { getAuth } from 'firebase/auth';

    let firebaseConfig = {
        // Insert Firebase Credentials here
        apiKey: 'AIzaSyBKhsmYSTVL64oXto5Q8PLLO8KDvKMPg7Y',
        authDomain: 'ruumii.firebaseapp.com',
        projectId: 'ruumii',
        storageBucket: 'ruumii.appspot.com',
        messagingSenderId: '961633016174',
        appId: '1:961633016174:web:efa6dc89aca35a1674897f',
        measurementId: 'G-559GB9CGNV'
    };

    // Initialize Firebase
    const app = initializeApp(firebaseConfig);
    export const db = getFirestore(app);
    export const auth = getAuth(app);

    // firebase.initializeApp(firebaseConfig);
</script>

<main>
    {#if !firebaseConfig.projectId}
        <strong>Step 0</strong>
        Create a
        <a href="https://firebase.google.com/">Firebase Project</a>
        and paste your web config into
        <code>App.svelte</code>
        .
    {/if}

    <!-- 1. 🔥 Firebase App -->
    <FirebaseApp {auth} {db}>
        <h1>💪🔥 Mode Activated</h1>

        <p>
            <strong>Tip:</strong>
            Open the browser console for development logging.
        </p>

        <!-- 2. 😀 Get the current user -->
        <User let:user let:auth>
            Howdy 😀! User
            <em>{user.uid}</em>

            <button on:click={() => auth.signOut()}>Sign Out</button>

            <div slot="signed-out">
                <button on:click={() => auth.signInAnonymously()}> Sign In Anonymously </button>
            </div>

            <hr />

            <!-- 3. 📜 Get a Firestore document owned by a user -->
            <Doc path={`posts/${user.uid}`} let:data={post} let:ref={postRef} log>
                <h2>{post.title}</h2>

                <p>
                    Document created at <em>{new Date(post.createdAt).toLocaleString()}</em>
                </p>

                <span slot="loading">Loading post...</span>
                <span slot="fallback">
                    <button
                        on:click={() =>
                            postRef.set({
                                title: '📜 I like Svelte',
                                createdAt: Date.now()
                            })}
                    >
                        Create Document
                    </button>
                </span>

                <!-- 4. 💬 Get all the comments in its subcollection -->

                <h3>Comments</h3>
                <Collection
                    path={postRef.collection('comments')}
                    query={(ref) => ref.orderBy('createdAt')}
                    let:data={comments}
                    let:ref={commentsRef}
                    log
                >
                    {#if !comments.length}
                        No comments yet...
                    {/if}

                    {#each comments as comment}
                        <p>
                            <!-- ID: <em>{comment.ref.id}</em> -->
                        </p>
                        <p>
                            {comment.text}
                            <button on:click={() => comment.ref.delete()}>Delete</button>
                        </p>
                    {/each}

                    <button
                        on:click={() =>
                            commentsRef.add({
                                text: '💬 Me too!',
                                createdAt: Date.now()
                            })}
                    >
                        Add Comment
                    </button>

                    <span slot="loading">Loading comments...</span>
                </Collection>
            </Doc>
        </User>
    </FirebaseApp>
</main>

but this is not working and yields the aforementioned error message