De acuerdo, entonces el error proviene de la línea 37, donde intento recopilar la marca de tiempo para cada publicación y luego dirijo esa información a mi almacenamiento de Firebase. No puedo entender qué está causando el error o cómo obtengo el error ya que importé mi archivo firebase.js.
import React, { useState } from 'react'; import { Button } from '@material-ui/core'; import { storage, db } from './firebase'; function ImageUpload({username}) { const [image, setImage] = useState(null); const [progress, setProgress] = useState(0); const [caption, setCaption] = useState(''); const handleChange = (e) => { if (e.target.files[0]) { setImage(e.target.files[0]); } }; const handleUpload = () => { const uploadTask = storage.ref('images/${image.name}').put(image); uploadTask.on( 'state_changed', (snapshot) => { const progress = Math.round( (snapshot.bytesTransferred / snapshot.totalBytes) *100 ); setProgress(progress); }, (error) => { console.log(error); }, () => { storage .ref("images") .child(image.name) .getDownloadURL() .then(url => { db.collection("posts").add({ timestamp: firebase.firestore.FieldValue.serverTimestamp(), caption: caption, imageUrl: url, username: username }) }) } ) } return ( <div> <input type="text" placeholder='Caption' onChange={event => setCaption(event.target.value)} value={caption}/> <input type="file" onChange={handleChange} /> <Button className="imageUpload" onClick ={handleUpload}>Upload</Button> </div> )} exportar ImageUpload predeterminado
Resolví el problema al incluir la línea.
import firebase from 'firebase/compat/app';en el encabezado de la página.