UIncaught ReferenceError: db is not defined at HTMLButtonElement. (VM586 editor.js:66:9)

I’m building a blog website using Firebase Firestore and JavaScript. I’m trying to save blog posts to Firestore, but I’m encountering an issue where db is not defined when I attempt to use it in my editor.js file.

Here’s a brief overview of what I’m trying to do:

User Interface: I have an input field for the blog title and a text area for the article content. There’s also an option to upload an image for the banner, which gets displayed at the top of the blog post.
Publishing the Post: When the user clicks the “Publish” button, I want to generate a unique document ID, gather the input data, and store it in Firestore under a new document in the “blogs” collection.
Problem: Despite setting up Firebase and Firestore correctly (or so I think), when I try to use the db variable to interact with Firestore, I get a ReferenceError: db is not defined.

this is my editor.js

const blogTitleField = document.querySelector('.title');
const articleField = document.querySelector('.article');

// banner
const bannerImage = document.querySelector('#banner-upload');
const banner = document.querySelector(".banner");
let bannerPath;

const publishBtn = document.querySelector('.publish-btn');
const uploadInput = document.querySelector('#image-upload');

bannerImage.addEventListener('change', () => {
    uploadImage(bannerImage, "banner");
})

uploadInput.addEventListener('change', () => {
    uploadImage(uploadInput, "image");
})

const uploadImage = (uploadFile, uploadType) => {
    const [file] = uploadFile.files;
    if (file && file.type.includes("image")) {
        const formdata = new FormData();
        formdata.append('image', file);

        fetch('/upload', {
            method: 'post',
            body: formdata
        }).then(res => res.json())
            .then(data => {
                if (uploadType == "image") {
                    addImage(data, file.name);
                } else {
                    bannerPath = `${location.origin}/${data}`;
                    banner.style.backgroundImage = `url("${bannerPath}")`;
                }
            })
    } else {
        alert("upload Image only");
    }
}

const addImage = (imagePath, alt) => {
    let curPos = articleField.selectionStart;
    let textToInsert = `r![${alt}](${imagePath})r`;
    articleField.value = articleField.value.slice(0, curPos) + textToInsert + articleField.value.slice(curPos);
}

let months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

publishBtn.addEventListener('click', () => {
    if (articleField.value.length && blogTitleField.value.length) {
        // generating id
        let letters = 'abcdefghijklmnopqrstuvwxyz';
        let blogTitle = blogTitleField.value.split(" ").join("-");
        let id = '';
        for (let i = 0; i < 4; i++) {
            id += letters[Math.floor(Math.random() * letters.length)];
        }

        // setting up docName
        let docName = `${blogTitle}-${id}`;
        let date = new Date(); // for published at info

        //access Firestore with db variable;
        db.collection("blogs").doc(docName).set({
            title: blogTitleField.value,
            article: articleField.value,
            bannerImage: bannerPath,
            publishedAt: `${date.getDate()} ${months[date.getMonth()]} ${date.getFullYear()}`
        })
            .then(() => {
                location.href = `/${docName}`;
            })
            .catch((err) => {
                console.error(err);
            })
    }
})

this is my firebase installation (firebase.jsm)
Can any one help me plzzz,

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
    apiKey: "AIzaSyDQaVM5xjFB-WB4IQXnupSvWOJSQdlrN00",
    authDomain: "bloggin-site-c4727.firebaseapp.com",
    projectId: "bloggin-site-c4727",
    storageBucket: "bloggin-site-c4727.appspot.com",
    messagingSenderId: "170432646256",
    appId: "1:170432646256:web:f36807db85372e1956f8b5"
};

const app = initializeApp(firebaseConfig);

firebase.initializeApp(firebaseConfig);
const db = firebase.firestore();

export { db };

In my HTML, I’m including the scripts like this:

<script src="https://www.gstatic.com/firebasejs/10.13.0/firebase-app.mjs"></script>
<script src="https://www.gstatic.com/firebasejs/10.13.0/firebase-firestore.mjs"></script>

<script src="js/firebase.js"></script>
<script src="js/home.js"></script>

Here’s a brief overview of what I’m trying to do:

User Interface: I have an input field for the blog title and a text area for the article content. There’s also an option to upload an image for the banner, which gets displayed at the top of the blog post.
Publishing the Post: When the user clicks the “Publish” button, I want to generate a unique document ID, gather the input data, and store it in Firestore under a new document in the “blogs” collection.
Problem: Despite setting up Firebase and Firestore correctly (or so I think), when I try to use the db variable to interact with Firestore, I get a ReferenceError: db is not defined.

However, when I try to publish a blog post,

I get the following error in the console:

Uncaught ReferenceError: db is not defined
at HTMLButtonElement.<anonymous> (editor.js:66:9)

I’m not sure why this is happening, as I’ve correctly exported db from firebase.mjs and imported it in editor.js. I’ve tried including the Firebase SDK via <script> tags as well, but the error persists.

Could anyone point out what might be going wrong here?

Thanks in advance for your help!