Firebase Storage: To use ref(service, url), the first argument must be a Storage instance

I’m having trouble retrieving images from firebase storage. I’m currently integrating the Firebase SDK in my expo react native project. Firebase’s sdk version I’m using is 9.6.1.
I can successfully use Firebase AUTH and firebase firestore (retrieving and updating data).

When I try to use firebase’s storage I get this weird error:

[Unhandled promise rejection: FirebaseError: Firebase Storage: To use
ref(service, url), the first argument must be a Storage instance.
(storage/invalid-argument)]

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

This is where I initialise my firebase app:

import { initializeApp } from "firebase/app";

export const firebaseConfig = {
  apiKey: "apices",
  authDomain: "xxxxx.firebaseapp.com",
  databaseURL:
    "https://xxxxx-default-rtdb.europe-west1.firebasedatabase.app",
  projectId: "xxxxx",
  storageBucket: "xxxxx.appspot.com",
  messagingSenderId: "333333333",
  appId: "yyyyyyyyyyy",
  measurementId: "fffffff",
};

const app = initializeApp(firebaseConfig);

export { app };

Then doing a simple:

const imageRef = ref(getStorage(), imageUrl);

gives me an error. And yes imageUrl is a valid gs://projectid.appspot.com/folder1/image1.jpg url.

Am I getting something wrong?

>Solution :

Can you try initializing storage in the same file where you’ve initialized Firebase and then import it wherever required? The getStorage() currently might be getting invoked before Firebase is initialized:

const app = initializeApp(firebaseConfig);
const storage = getStorage(app)l

export { app, storage };

// import { storage } from "../firebase_file.js"

const imageRef = ref(storage, imageUrl);