Uncaught TypeError on Firebase Storage

Question

So I was trying to get an image from firebase storage using its file name, which is an ID of a user and display it. Here's what came up: Uncaught TypeError: Failed to resolve module specifier "firebase/storage". Relative references must start with either "/", "./", or "../". I have tried to do so, but it just says 404.

import { initializeApp } from "https://www.gstatic.com/firebasejs/10.11.1/firebase-app.js";
import { getDatabase, ref, onValue } from "https://www.gstatic.com/firebasejs/10.11.1/firebase-database.js";//
import { getStorage, ref as storageRef, getDownloadURL } from "firebase/storage";

const appSettings = {
    databaseURL: "https://mobilelibattendance-default-rtdb.asia-southeast1.firebasedatabase.app/"
}
const app = initializeApp(appSettings);
const database = getDatabase(app);
const attendanceDB = ref(database, "users");
const storage = getStorage(app);//

const userIMG = document.getElementById("profile");
const IDNum = document.getElementById("IDNum");
const fullName = document.getElementById("fullName");
const fullBirthday = document.getElementById("fullBirthday");
const sex = document.getElementById("sex");
const street = document.getElementById("street");
const exp = document.getElementById("exp");
const cityProvince = document.getElementById("cityProvince");

 onValue(attendanceDB, function(snapshot) {
    let scannedID="CNPL0987654321"; // placeholders
    //CNPL0987654321  CNPL1234567890
    if (snapshot.exists()){
        let usersArray = Object.entries(snapshot.val());
        for (let i = 0;i<usersArray.length;i++) {
        let allUsers = usersArray[i]; //fetch users
        let userID = allUsers[0]; //fetch id
        let userInfo = allUsers[1]; //fetch info
        if (userID == scannedID){
            listUserInfo(scannedID, userInfo); //pass data
        }
    }
    }else {
        fullName.innerHTML="No user...";
    }

})

async function listUserInfo(userID, userInfo) { //receive data
    console.log(userInfo);
    let fullname = userInfo.firstname + " " + userInfo.lastname;
    let birthdate = userInfo.birthmonth + " " + userInfo.birthday + ", " + userInfo.birthyear;
    const filename = userID + ".jpg";
    const filePath = `users/${filename}`
    const imageRef = ref(storage, filePath);

    let userIMGLink = imageRef;
    try {
        const url = await getDownloadURL(imageRef);
        changeUserImage(url);
       }catch (error) {
        console.error("Error getting download URL:", error);
       }

    changeUserImage(userIMGLink);
    IDNum.innerHTML=userID;
    fullName.innerHTML=fullname;
    fullBirthday.innerHTML=birthdate;
    sex.innerHTML=userInfo.sex;
    street.innerHTML =userInfo.street;
    exp.innerHTML =userInfo.exp;
    cityProvince.innerHTML =userInfo.cityProvince;
}

I am using the url in my database storage to change the src of the element userIMG

function changeUserImage(userIMGLink) {
    let newIMG = userIMGLink;
    userIMG.src = newIMG;
    console.log(newIMG);
}

Answer 1

You can't really mix up usage of the two different import styles:

import { getDatabase, ref, onValue }
    from "https://www.gstatic.com/firebasejs/10.11.1/firebase-database.js";
import { getStorage, ref as storageRef, getDownloadURL }
   from "firebase/storage";

The first one you used with direct HTTP access is for standalone web pages that don't use a module bundler. The second one is for web apps that use a bundler. Apparently you are not using a bundler, so you should stick to the direct HTTP imports as discussed in the documentation:

Do you use ESM and want to use browser modules? Replace all your import lines to use the following pattern: import { } from 'https://www.gstatic.com/firebasejs/10.11.1/firebase-SERVICE.js' (where SERVICE is an SDK name such as firebase-firestore).

Using browser modules is a quick way to get started, but we recommend using a module bundler for production.

So if you want to use the firebase-storage module, you should use the http import that matches the version you're requesting for the other Firebase modules:

https://www.gstatic.com/firebasejs/10.11.1/firebase-storage.js