Using Next.JS 13 and Firebase V9.
I have been able to make requests to Cloud Firestore successfully without issue. I believe my firebase app is configured correctly. I cannot identify the issue with my Cloud Storage setup though. Every time I try to get a ref and download a Cloud Storage file, I am met with No default bucket found. I made sure to initialize the storage bucket with files in the Firebase Console before I attempted this. I have tried numerous variations of implementation from Bard, Stackoverflow, and elsewhere, and I am certain it’s probably just a minor thing I’ve overlooked, but I can’t seem to narrow down the issue for the life of me.
Here is my Firebase.js file in my main project directory.
// Import the functions you need from the SDKs you need
import { initializeApp, getApp, getApps} from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { getStorage} from "firebase/storage";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
const firebaseConfig = {
apiKey: process.env.FIREBASE_APIKEY,
authDomain: process.env.FIREBASE_AUTHDOMAIN,
projectId: process.env.FIREBASE_PROJECTID,
storageBucket: process.env.FIREBASE_STORAGEBUCKET,
messagingSenderId: process.env.FIREBASE_MESSAGEID,
appId: process.env.FIREBASE_APPID,
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
measurementId: process.env.FIREBASE_MEASUREMENTID
};
// Initialize Firebase
const app = !getApps().length ? initializeApp(firebaseConfig) : getApp();
const db = getFirestore(app);
const storage = getStorage(app);
//Export relevant modules
export { app, db, storage };
and here is the FileService file I’ve been trying to call when clicking a button on the website, which results in the no storage bucket found error.
import { storage } from "@/firebase"
import { ref, getDownloadURL } from "firebase/storage";
const downloadFile = async (fileName: string) => {
const storageRef = await ref(storage);
const file = await ref(storageRef, fileName);
// Download the file to the specified location.
await fetch(await getDownloadURL(file), {
method: "GET",
mode: "cors",
headers: {
"Content-Type": "application/pdf",
},
});
};
export default downloadFile;
I’ve also attempted to get a storageRef inside the Firebase.js file just to see if that would work but it throws the error there as well. I appreciate any guidance, I spent a long time trying to figure this one out and I wouldn’t be surprised if I’m doing overlooking something small and stupid but I need a third party to point me in the right direction here.