Soy nuevo en desarrollo web. Traté de encontrar una respuesta en Internet en las últimas 24 horas sin éxito y ahora me comunico aquí.
este es mi error:
TypeError no detectado: firebase__WEBPACK_IMPORTED_MODULE_3 _.storage.ref no es una función
este es el archivo firebase.js:
import { initializeApp } from 'firebase/app'; import { getStorage } from 'firebase/storage'; const firebaseConfig = { apiKey: "", authDomain: "", projectId: "", storageBucket: "", messagingSenderId: "", appId: "" }; const app = initializeApp(firebaseConfig); export const storage = getStorage(app);y estoy importando el almacenamiento en el componente así:
import {storage} from "../../firebase";esta es la función de carga:
const upload = (items) => { items.forEach((item) => { const fileName = new Date().getTime() + item.label + item.file.name; const uploadTask = storage.ref(`/items/${fileName}`).put(item.file); uploadTask.on( "state_changed", (snapshot) => { const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100; console.log("Upload is " + progress + "% done"); }, (error) => { console.log(error); }, () => { uploadTask.snapshot.ref.getDownloadURL().then((url) => { setMovie((prev) => { return { ...prev, [item.label]: url }; }); setUploaded((prev) => prev + 1); }); } ); }); };alguna sugerencia ?
Está utilizando la sintaxis del SDK de Firebase JS con espacio de nombres heredado (v8 y anterior) con el SDK de Firebase modular más reciente (v9 y posterior).
En lugar de storage.ref() , debe usar ref(storage, path) :
import { storage } from "../../firebase" import { ref, uploadBytes } from "firebase/storage"; const upload = (items) => { items.forEach((item, index) => { const storageRef = ref(storage, `/items/${fileName}`); const uploadTask = uploadBytes(storageRef, item.file); uploadTask.on( "state_changed", (snapshot) => { const progress = Math.round((snapshot.bytesTransferred / snapshot.totalBytes) * 1000)/10; console.log(`Upload #${index+1} is ${progress}% done`); }, (error) => { console.log(error); }, () => { console.log(`Upload #${index+1} is complete, fetching URL...`); getDownloadURL(storageRef) .then((url) => { console.log(`Upload #${index+1} is now available at ${url}.`); setMovie((prev) => { return { ...prev, [item.label]: url }; }); setUploaded((prev) => prev + 1); }) .catch((error) => { console.log(error); }); } ); }); }Le animo a que lea la documentación por completo y lea la guía de migración para que pueda ver para qué versión de SDK se creó el código con el que está trabajando.
Nota: Debe mejorar aún más este código para manejar mejor los errores, como establecer un mensaje de error visible para el usuario para las cargas fallidas.