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 '../../ponents/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!

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 '../../ponents/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!

• javascript
• reactjs
• firebase
• file
• google-cloud-platform

1 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 mand 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