config.js:17 Uncaught ReferenceError: firebase is not defined in React propject compiled by webpack

Question

I am doing a React project, I want to use several firebase/firestre module, however it show me this error message I checked my webpack package.json, there is "firebase": "^9.6.11", under "dependencies",

and i also init the firebase with Firestore and configure hosting. Here is my chatbox.js file, maybe it can perform more detail.

import React from "react";
import {getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword} from "firebase/auth";
import {collection, getDoc, getDocs, addDoc, updateDoc, setDoc, Timestamp, doc} from "firebase/firestore";
import {db} from "../config";

function write_message(chatroomID, message) {
    console.log(getAuth().currentUser.uid + ' is sending message \"' + message + '\" to ' + chatroomID)
    var chatroom_docref = doc(db, collection(db ,'chatroom'), chatroomID);
    updateDoc(chatroom_docref, {
        last_time: Timestamp.fromDate(new Date()),
        last_text: message,
        msg_count: chatroom_docref.msg_count + 1
    });
    var messages_colref = collection(db, chatroom_docref + '\\messages')
    setDoc(doc(db, collection(db, messages_colref, chatroomID + chatroom_docref.msg_count)), {
        people: getAuth().currentUser.uid,
        time: Timestamp.fromDate(new Date()),
        text: message,
        msg_ID: chatroomID + chatroom_docref.msg_count
    })
}

My project is due within 10 hours, pls someone help...... Moreover, there is several warning message more below the Uncaught Reference Error