TypeError: storage.ref is not a function 에러

firebase와 연동하여 이미지 업로드를 구현하던중 에러가 발생했다.

TypeError: storage.ref is not a function

그 전까지 input이 있는 js파일에서 업로드 함수를 만들어 실행했을땐 문제없이 작동하였는데,

리듀서에서 함수를 만들어 실행하니 함수가 아니라는 오류가 계속 발생하였다.

image.js (리듀서 파일)

const uploadImageFB = (image) => {   return function (dispatch, getState, storage) {     dispatch(uploading(true));     const _upload = storage.ref(`images/${image.name}`).put(image);     // const _upload = storage.ref(`images/${image.name}`).put(image); // 참조 만들어주기     _upload.then((snapshot) => {         snapshot.ref.getDownloadURL().then((url) => {         dispatch(uploadImage(url));       });     });   }; };

 

몇번이고 확인했지만 코드에는 문제가 없어 보였고, 

import { storage } from "../../shared/firebase";

storage를 import 한 부분에서 계속 노란줄이 나오기에 import에 문제가 있다고 생각이 들어 

firebase.js와 configureStore.js 등 여러 코드를 확인해봤지만 문제가 있는 코드를 발견하지 못했다.

 

그러던중 image.js의 업로드 함수에서 파라미터로 storage를 준다고 해서 

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

이부분의 storage가 firebase 저장소가 아닌 파라미터 storage로 인식한다는 생각이 들었다.

 

const uploadImageFB = (image) => {   return function (dispatch, getState) {     dispatch(uploading(true));     const _upload = storage.ref(`images/${image.name}`).put(image);     // const _upload = storage.ref(`images/${image.name}`).put(image); // 참조 만들어주기     _upload.then((snapshot) => {              snapshot.ref.getDownloadURL().then((url) => {         dispatch(uploadImage(url));       });     });   }; };

역시나 파라미터로 storage를 줬던게 문제였었다. 

 

이후 import 부분도 색이 들어오며 업로드 할시에 잘 작동이 되었다.

firebase에도 데이터가 잘 저장되는것을 확인이 되었다!

 

이번에도 느낀거지만 기본을 잊으면 안될듯 싶다.

파라미터 조심!!!