Cannot import { getStorage } from firebase/storage to use with React Native Expo image picker

Question

I am trying to get an image picker to save to Firebase. I've read a number of tutorials as well as the official documentation for Google cloud storage. They all say to do something like this:

import { getStorage, ref } from "firebase/storage";

so you can:

const storage = getStorage()

and then

const ref = firebase.storage().ref();

No matter what I do, I cannot get anything but this error:

TypeError: (0, _storage.getStorage) is not a function. (In '(0, _storage.getStorage)()', '(0, _storage.getStorage)' is undefined)

I can see firebase/storage in my node_modules. I console-logged (firebase) to make sure it is a thing. I tried a million different kinds of import. I installed other firebase dependencies like @react-native-firebase to use their storage functions, but nothing is working. Everything else Firebase works fine for me.

I have no clue what the problem is. I would be happy to do it another way, but everything says to use the storage() method. Am I doing something wrong? Is there an alternative to using the storage method to upload images to the cloud?

Answer 1

Check the version of Firebase you have in your app.

Firebase version 8 uses the firebase.storage() method.

In order to use getStorage you need to use Firebase v9.x

See this guide on how to upgrade: Upgrade from version 8 to the modular Web SDK

For Version 8, make sure to click on the Web Version 8 tab in the Firebase Docs: https://firebase.google.com/docs/storage/web/upload-files

Here is a snippet of code that worked for me (Firebase V8).

My Firebase Initialization File: FirebaseInitialize.js

import firebase from "firebase/app";
import "firebase/storage";

import { firebaseConfig } from "./firebaseConfig";

firebase.initializeApp(firebaseConfig);

export { firebase };

My Firebase Config file

export const firebaseConfig = {
  apiKey: "YOUR-API-KEY",
  authDomain: "YOUR-DOMAIN.firebaseapp.com",
  databaseURL: "https://YOUR-DOMAIN.firebaseio.com",
  projectId: "YOUR-PROJECTID",
  storageBucket: "YOUR-SOTRAGEBUCKET.appspot.com",
  appId: "APP-ID",
};

Where I need to use storage, this is what I do this:

import { firebase } from "./FirebaseInitialize";

const storageRef = firebase.storage().ref();

storageRef.put(file).then((snapshot) => {
  console.log("Uploaded!");
});
    

Hope this helps.