Cannot read properties of undefined (reading 'path') Firebase ref function conflict

Question

Error:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'path')

according to my testing,

   import { getStorage, ref, uploadBytesResumable, getDownloadURL } 
    from "https://www.gstatic.com/firebasejs/9.1.1/firebase-storage.js";
    
    import { getDatabase, set, child, get, update, remove } 
    from "https://www.gstatic.com/firebasejs/9.1.1/firebase-database.js";
    
    const realdb = getDatabase();

the error is becuase ref( ) function from firebase-storage is different from ref( ) from firebase-database

but i can import only one of the function, so what to do? to save the downloadURL i need both (firebase-storage) and (firebase-database).

score 4 · Accepted Answer · answered Oct 11 '21 at 18:05

4

You can just rename one of the imports like this:

import { getStorage, ref as storageRef } from "https://www.gstatic.com/firebasejs/9.1.1/firebase-storage.js";

Then make sure you used storageRef() instead of ref() for storage in your code.

answered Oct 11 '21 at 18:05

Dharmaraj

47,845
8
52
84

1

thanks you so much, i didn't know it was so easy the error is resolved, my hunch was correct ref functions from both liabraries were conflicting. – Hassaan Raza Oct 11 '21 at 18:17
1

@HassaanRaza If you ever use deconstruction assignments, you can also rename the exported properties like so: `const { getStorage, ref: storageRef } = firebaseStorageExports;` (don't actually use a `firebaseStorageExports` object, just used here as an example to match above) – samthecodingman Oct 11 '21 at 21:54

Cannot read properties of undefined (reading 'path') Firebase ref function conflict

1 Answers1