node.js - 类型错误：_fire__WEBPACK_IMPORTED_MODULE_2__.default.auth 不是函数

Question

我使用 firebase 身份验证为我的应用创建了一个登录页面。然后我有一个联系人/个人信息表单，它将图像和文件作为输入并将它们上传到 Firebase 存储。但我正面临这个问题。这是我第一个使用 react 和 firebase 的项目——希望能得到一些简单的解释。

这是我的fire.js文件

import firebase from 'firebase';
import "firebase/auth";
import "firebase/storage";


if (!firebase.apps.length) {
    var fire,storage = firebase.initializeApp({
   
    // my credentials //
    });
  
 }else {
   fire = firebase.app();
   storage = firebase.storage(); // if already initialized, use that one
 }


//const fire = firebase.initializeApp(firebaseConfig);
export default {storage,fire};

这是我尝试添加联系人文档然后将图像添加到 Firebase 存储的页面：

import React, { useState } from "react";
import { render } from "react-dom";
import { storage } from "./firebase";
import fire from './fire';


const AddRecord = () => {
  const [image, setImage] = useState(null);
  const [url, setUrl] = useState("");
  const [progress, setProgress] = useState(0);

  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 => {
            setUrl(url);
          });
      }
    );
  };

  console.log("image: ", image);

  return (
    <div>
      <progress value={progress} max="100" />
      <br />
      <br />
      <input type="file" onChange={handleChange} />
      <button onClick={handleUpload}>Upload</button>
      <br />
      {url}
      <br />
      <img src={url || "http://via.placeholder.com/300"} alt="firebase-image" />
    </div>
  );
};
export default AddRecord;

标签： node.jsreactjsfirebasefirebase-authenticationfirebase-storage