Why is db.collection not working for firebase. I am using next.js w/ useSession() from next-auth

Question

All the answers on stack are a bit old and as firebase is constantly updating their docs I am having a lot of trouble w/ firebase. Could someone please shed some light on this for me?

I am using next.js and I have next-auth linked with Facebook. I want to take the current user session information and give it to firebase

Here I have my firebase.js file:

import firebase from 'firebase/compat/app';
import 'firebase/compat/storage';
import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore/lite';
import { getStorage } from 'firebase/storage';

const firebaseConfig = {
    apiKey: 'SECRET',
    authDomain: 'SECRET',
    projectId: 'SECRET',
    storageBucket: 'SECRET',
    messagingSenderId: 'SECRET',
    appId: 'SECRET',
};

const app = !firebase.apps.length
    ? firebase.initializeApp(firebaseConfig)
    : firebase.app();
// const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
const storage = getStorage(app);

export { db, storage };

And then below is the code the error is being issued from. I have tired a few solutions by trying to use doc, getDoc but it doesn't match up with my "session.user.name" and such.

Here is my.js file that is trying to use firebase. the issue states is coming from db.collection(). I am using useSession() with next.js ti get my server-side data

import React, { useRef, useEffect } from 'react';
import Image from 'next/image';
import { useSession } from 'next-auth/react';
import { EmojiHappyIcon } from '@heroicons/react/outline';
import { CameraIcon, VideoCameraIcon } from '@heroicons/react/solid';
import { db } from '../firebase';
import firebase from 'firebase/app';
import { collection } from 'firebase/firestore';

function InputBox() {
    const { data: session } = useSession();

    const inputRef = useRef(null);
    const sendPost = (e) => {
        e.preventDefault();
        if (!inputRef.current.value) return;

        db.collection('posts').add({
            message: inputRef.current.value,
            name: session.user.name,
            email: session.user.email,
            image: session.user.image,
            timestamp: firebase.firestore.FieldValue.serverTimestamp(),
        });

        inputRef.current.value = '';
    };

Answer 1

[SOLVED]

Due to new docs the v9> firebase has changed the serverTimestamp() function.

import { useSession } from 'next-auth/react';
import { EmojiHappyIcon } from '@heroicons/react/outline';
import { CameraIcon, VideoCameraIcon } from '@heroicons/react/solid';
import { db } from '../firebase';
import { collection, serverTimestamp, addDoc } from 'firebase/firestore';

function InputBox() {
    const { data: session } = useSession();

    const inputRef = useRef(null);

    const sendPost = (e) => {
        e.preventDefault();
        if (!inputRef.current.value) return;

        try {
            const docRef = addDoc(collection(db, 'posts'), {
                message: inputRef.current.value,
                name: session.user.name,
                email: session.user.email,
                image: session.user.email,
                timestamp: serverTimestamp(),
            });
            console.log(docRef.id);
        } catch (e) {
            console.log('ERROR ADDING DOC:', e);
        }

        inputRef.current.value = '';
    };

I threw in a try/catch to handle the issue.

timestamp: firebase.firestore.FieldValue.serverTimestamp() -> timestamp: serverTimestamp()

also need to import {serverTimestamp} from 'firebase/firestore'