javascript - TypeError: _firebase__WEBPACK_IMPORTED_MODULE_9__.default.collection is not a function

Question

Down below is the code where I am getting an error on. This is a WhatsApp clone using react JS and firebase as a server that I am making and I am following the instructions to the teeth but for some reason, I can't fix this annoying bug! I defined db and imported it as you see below but it is still giving me an error. Plz, help! If you need me to clarify or have any other questions please let me know!

enter image description here

import React, { useEffect, useState } from 'react'
import{Avatar, IconButton} from "@material-ui/core";
import DonutLargeIcon from "@material-ui/icons/DonutLarge";
import ChatIcon from "@material-ui/icons/Chat";
import MoreVertIcon from "@material-ui/icons/MoreVert";
import{SearchOutlined} from "@material-ui/icons";
import SidebarChat from "./SidebarChat";
import "./Sidebar.css";
import db from "./firebase";

function Sidebar() {

 const [rooms, setRooms] = useState([]);

useEffect(() => {
 db.collection("rooms").onSnapshot((snapshot) => 
    setRooms(snapshot.docs.map((doc) =>({
            id: doc.id,
            data: doc.data(),
        }))
        )
    );
        }, []);

question from:https://stackoverflow.com/questions/65649184/typeerror-firebase-webpack-imported-module-9-default-collection-is-not-a-fu

Answer 1

Waitting for answers