ref 不是 function，firebase 存储图片上传，reactJS

Question

Hey guys I keep getting this error, while trying to upload an image to my firebase storage.

Unhandled Rejection (TypeError): firebase_index__WEBPACK_IMPORTED_MODULE_2 _.default.ref is not a function

This is the component I am trying to upload image from.

import React, { useState, useEffect } from 'react';
import storage from '../firebase/index';

// Imported components
import Section from '../components/Layout/Section';
import Container from '../components/Layout/Container';
import Dropzone from 'react-dropzone';

function FolderProjectUpload() {
  const [file, setFile] = useState(null);
  const [url, setURL] = useState('');

  function handleChange(e, acceptedFiles) {
    setFile(acceptedFiles);
  }

  function handleUpload(e, acceptedFiles) {
    const uploadTask = storage
      .ref(`/images/${acceptedFiles.name}`)
      .put(acceptedFiles);
    uploadTask.on('state_changed', console.log, console.error, () => {
      storage
        .ref('images')
        .child(acceptedFiles.name)
        .getDownloadURL()
        .then((url) => {
          setFile(null);
          setURL(url);
        });
    });
  }

  return (
    <Section justifyContent="center">
      <Container width="1080px">
        <Dropzone onDrop={handleUpload}>
          {({ getRootProps, getInputProps }) => (
            <section>
              <div {...getRootProps()}>
                <input {...getInputProps()} onChange={handleChange} />
                <p>Drag 'n' drop some files here, or click to select files</p>
              </div>
            </section>
          )}
        </Dropzone>
        <Container width="50%" background="white"></Container>
      </Container>
    </Section>
  );
}

export default FolderProjectUpload;

This is how I import storage into firebase configuration:

import firebase from 'firebase';
import 'firebase/firestore';
import 'firebase/storage';

firebase.initializeApp({
  apiKey: 'XY',
  authDomain: 'XY',
  databaseURL: 'XY',
  projectId: 'XY',
  storageBucket: 'XY',
  messagingSenderId: 'XY',
  appId: 'XY',
  measurementId: 'XY',
});

let db = firebase.firestore();
let storage = firebase.storage();

export default {
  firebase,
  db,
  storage,
};

Anybody has ideas on what I am doing wrong?

Answer 1

I think your import line is wrong. Assuming that the second file you showed is "../firebase/index", your import should be like this, to call out the specific property of the exported object:

import { storage } from '../firebase/index';

Or try:

import firebase from '../firebase/index';
let storage = firebase.storage();