类型错误：_firebase__WEBPACK_IMPORTED_MODULE_9__.default.collection 不是 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(),
        }))
        )
    );
        }, []);

Answer 1

I went into the firebase.js file and changed the export from the following:

export default {db};

To the following and it removed the error for me:

export default db;

The issue was caused by the brackets in my case.