Пытаюсь загрузить в хранилище firebase с помощью react. Ошибка типа: Не удается прочитать свойства неопределенного (чтение 'ref')

# #reactjs #firebase #storage #typeerror

#реагирует на #огневая база #Хранение #ошибка типа

Вопрос:

Вот приведенный ниже код. Журнал консоли сообщает мне, что он правильно считывает изображение, но firebase.storage по какой-то причине не определен.

 import React from 'react'; import firebase from 'firebase/compat/app'; import "firebase/storage";  function ProfilePic() {    const [image , setImage] = React.useState('');   const upload = ()=gt;{  if (image == null) return;  console.log(image);  const ref = firebase.storage.ref(`images/${image.name}`);  ref.put(image).on("state_changed" , alert("success") , alert);    }    return (  lt;div className="App"gt;  lt;centergt;  lt;input type="file" onChange={(e)=gt;{setImage(e.target.files[0])}}/gt;  lt;button onClick={upload}gt;Uploadlt;/buttongt;  lt;/centergt;  lt;/divgt;  ); }  export default ProfilePic;

Ответ №1:

Вам необходимо импортировать устаревшую библиотеку пространств имен, чтобы использовать ее так, как вы ожидаете.

 import "firebase/compat/storage";

При использовании "firebase/storage" вместо этого вы импортируете современный модульный SDK.

Вам также необходимо использовать вызов firebase.storage() , чтобы получить его экземпляр, а не пространство имен:

 const ref = firebase.storage().ref(`images/${image.name}`);