I am developing an app using Gatsby, React, and Firebase. The app works fine in the npm run develop stage of development, but when I attempt to build using npm run build, I get the error

WebpackError: TypeError: (0 , dist_namespaceObject.initializeApp) is not a function

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


import { navigate } from 'gatsby'


const firebaseConfig = {
   // Firebase config goes here
};


const app = initializeApp(firebaseConfig);
//const analytics = getAnalytics(app);
const db = getFirestore();

This is the relevant code I am using, and I cannot find any solution to this problem as of right now. I am using Firebase 9.6.7, Gatsby 4.8.0, React 17.0.2 and Node 17.31. I've tried all sorts of things, including changing the import, importing everything, but have had no luck so far.