Uploading images to Firebase Storage (v 9.xx) using expo and React Native. (Ref undefined?)

Question

Possible Unhandled Promise Rejection (id: 0): TypeError: _ref2 is not a function. (In '_ref2(storage, "image.jpg")', '_ref2' is undefined)

I sometimes get the same problem but with _ref instead of _ref2 being undefined

I have tried messing around with the import of ref, getStorage, and uploadBytes. I can see that the ref value in my import import { getStorage, ref, uploadBytes } from "firebase/storage"; is blurred out, but the getStorage and uploadBytes reads.

Here is my full code:

 import { getStorage, ref, uploadBytes } from "firebase/storage";
 import React, {useState} from 'react'


 const [image, setImage] = useState(null);
 const [uploading, setUploading] = useState(false);

 const pickImage = async () => {
 let result = await ImagePicker.launchImageLibraryAsync({
 mediaTypes: ImagePicker.MediaTypeOptions.All
 allowsEditing: true,
 aspect: [9, 16],
 quality: 1,
 });

 console.log(result);

 if (!result.canceled) {
    setImage(result.assets[0].uri);

    const storage = getStorage();
    const ref = ref(storage, "image.jpg");

    const img = await fetch(result.assets[0].uri);
    const bytes = await img.blob();

    await uploadBytes(ref, bytes);
 }
 };

also, uri only is being depracted, now I have to use result.assets[0].uri apparently.

Can anyone please help me? Thanks in advance.

Answer 1

Posting this as a community wiki to help other community members.

As stated by @Dharmaraj, don't name variables the same as any function names.

If the function name and variable name are the same then Javascript Engine ignores the variable. With var A you create a new variable. The declaration is actually hoisted to the start of the current scope (before the function definition). Afterwards the name is used up by the function of the same name.

Try:

const storageRef = ref(storage, "image.jpg");
await uploadBytes(storageRef, bytes);