Estoy creando una aplicación, el usuario puede cargar archivos y almacenarlos en el almacenamiento de Firebase.
Cuando hago clic en cargar, sigo recibiendo el error «TypeError: No se puede leer la propiedad ‘ref’ de undefined»
La configuración de Firebase parece correcta.
Cualquier ayuda, consejos muy apreciados!

Aqui esta mi codigo

import React from "react"; import firebase from "./services/firebase"; import storage from "./services/firebase"; export class Upload extends React.Component { constructor(props) { super(props); this.state = { image: null, url: "" }; this.handleUpload = this.handleUpload.bind(this); this.handleChange = this.handleChange.bind(this); } handleChange(event) { console.log(event.target.files[0]); if (event.target.files[0]) { const image = event.target.files[0]; this.setState({ image: image }); } } handleUpload() { const image = this.state.image; console.log(image); const uploadTask = firebase.storage.ref(`images/${image.name}`).put(image); uploadTask.on("state_changed", () ={amp}gt; { firebase.storage .ref("images") .child(image.name) .getDownloadURL() .then(url ={amp}gt; { this.setState({ url }); }); }); } render() { console.log(this.state.image); return ( {amp}lt;div className="upload"{amp}gt; {amp}lt;h2 className="title"{amp}gt;Upload content for your project{amp}lt;/h2{amp}gt; {amp}lt;div className="container"{amp}gt; {amp}lt;label{amp}gt;Photo{amp}lt;/label{amp}gt; {amp}lt;img src="/imgs/P.png" alt="photo" /{amp}gt; {amp}lt;input type="file" accept=".jpg, image/png, .jpeg, .gif" onChange={this.handleChange} /{amp}gt; {amp}lt;button onClick={this.handleUpload}{amp}gt;Upload{amp}lt;/button{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; ); } } 

Aquí está el archivo «./services/firebase»

 import firebase from "firebase/app"; import "firebase/database"; import "firebase/auth"; import "firebase/storage"; import "firebase/firestore"; import config from "./config"; const firebaseConfig = config; firebase.initializeApp(firebaseConfig); const database = firebase.database(); const listenTo = (dataToListenTo = "", callbackFunction = () ={amp}gt; {}) ={amp}gt; { const databaseRef = database.ref(dataToListenTo); databaseRef.on("value", snapshot ={amp}gt; { callbackFunction(snapshot); }); return databaseRef; }; const writeTo = (dataToWriteTo = "", value) ={amp}gt; { const databaseRef = database.ref(dataToWriteTo); databaseRef.push(value); }; const update = (keyToUpdate = "", value) ={amp}gt; { const databaseRef = database.ref(keyToUpdate); databaseRef.update(value); }; const remove = (keyToUpdate = "") ={amp}gt; { const databaseRef = database.ref(keyToUpdate); databaseRef.remove(); }; const getCurrentUser = () ={amp}gt; { return firebase.auth().currentUser; }; const isLoggedIn = () ={amp}gt; { if (firebase.auth().currentUser) { return true; } return false; }; const signIn = (email, password) ={amp}gt; { return firebase.auth().signInWithEmailAndPassword(email, password); }; const onLoginChange = (callbackFunction = () ={amp}gt; {}) ={amp}gt; { const authRef = firebase.auth().onAuthStateChanged(user ={amp}gt; { callbackFunction(user); }); return authRef; }; const signOut = () ={amp}gt; { return firebase.auth().signOut(); }; const createUser = (email, password) ={amp}gt; { return firebase.auth().createUserWithEmailAndPassword(email, password); }; export default { writeTo, listenTo, update, remove, getCurrentUser, isLoggedIn, signIn, onLoginChange, signOut, createUser }; 

¿Qué estoy haciendo mal?

storage() es un método no una propiedad, por lo tanto, en su código debe usar lo siguiente:

 firebase.storage().ref(`images/${images.name}`) firebase.storage().ref("images") 

Revisa aquí para mas información:

https://firebase.google.com/docs/reference/js/firebase.storage.html