"TypeError: db._checkNotDeleted is not a function" When creating a Storage Ref on Firebase / React

Question

I'm creating an app on React that uses Firebase for backend data and want to be able to upload pictures. When trying to get a Storage Ref through firebase, I get the following error:

Every time I try to get a ref to the Storage, I get this error. I also use the realtime-databse on firebase, but I don't think that would interfere at all. Below is the code that is called:

import database, { auth, provider, storage } from '../../components/utils/firebase.js';
import { uploadBytes } from '@firebase/storage';

...
        handleSubmit(e) {
        e.preventDefault();

        const file = e.target[0].files[0];
        console.log("File: ", file);
        
        if (!file) {
            console.log("No file!");
          } else {
            const storageRef = ref(storage, `images/${file.name}`);
            uploadBytes(storageRef, file);
            console.log("Uploaded file!");
            console.log("File: " + file);
          }
        
    }

firebase.js (my config file):

import { initializeApp } from 'firebase/app';
import { getDatabase } from 'firebase/database';
import  { getAuth, GoogleAuthProvider } from 'firebase/auth';
import { getStorage } from 'firebase/storage';

const firebaseConfig = {
  apiKey: process.env.REACT_APP_APIKEY,
  authDomain: process.env.REACT_APP_AUTHDOMAIN,
  databaseURL: process.env.REACT_APP_DATABASEURL,
  projectId: process.env.REACT_APP_PROJECTID,
  storageBucket: process.env.REACT_APP_STORAGEBUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGINGSENDERID,
  appId: process.env.REACT_APP_APPID,
  measurementId: process.env.REACT_APP_MEASUREMENTID
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const database = getDatabase(app);

export const storage = getStorage(app);
export default database;
export const auth = getAuth(app);

export const provider = new GoogleAuthProvider();

Does anyone have any ideas as to why this is happening? Thank you!

Answer 1

I found the issue while watching a video of someone setting up their storage bucket.

Essentially, because I am already using ref for my realtime database, and import that command from the realtime database folder, my storage ref was actually a realtime database ref. To fix this, I imported my storage ref function like so:

import { ref as sRef } from 'firebase/storage';

then used sRef instead of ref.

Hope this helps anyone who had the same issue! It was frustrating to hunt down