类型错误：firebase_app__WEBPACK_IMPORTED_MODULE_0___default.a.analytics 不是函数

Question

我必须在 Reactjs 和 firebase 存储中上传图片。但是在我运行它之后，它向我显示了这个错误

这是我的代码src/firebase/firebase.js。我必须与我的火力连接的地方

import firebase from 'firebase/app'
import 'firebase/storage'

var firebaseConfig = {
    apiKey: "AIzaSyDWZ8hH_r-thnYFhwYgBFbmIYaGid9ppOM",
    authDomain: "milkteashop-4565d.firebaseapp.com",
    databaseURL: "https://milkteashop-4565d.firebaseio.com",
    projectId: "milkteashop-4565d",
    storageBucket: "milkteashop-4565d.appspot.com",
    messagingSenderId: "211198335221",
    appId: "1:211198335221:web:05113e736a60861b100dbc",
    measurementId: "G-7CMBMYCJEG"
};

firebase.initializeApp(firebaseConfig);
const storage = firebase.storage()
export {
    storage, firebase as default
}
firebase.analytics();

在App.js我必须从我的计算机上传文件图像并将其存储在 Firebase 存储中

import React, { useState } from 'react'
import { storage } from "./firebase/firebase"


function App() {
  const allInputs = { imgUrl: '' }
  const [imageAsFile, setImageAsFile] = useState('')
  const [imageAsUrl, setImageAsUrl] = useState(allInputs)

  console.log(imageAsFile)
  const handleImageAsFile = (e) => {
    const image = e.target.files[0]
    setImageAsFile(imageFile => (image))
  }

  const handleFireBaseUpload = e => {
    e.preventDefault()
    console.log('start of upload')
    if (imageAsFile === '') {
      console.error(`not an image, the image file is a ${typeof (imageAsFile)}`)
    }
    const uploadTask = storage.ref(`/images/${imageAsFile.name}`).put(imageAsFile)
    uploadTask.on('state_changed',
      (snapShot) => {
        console.log(snapShot)
      }, (err) => {
        //catches the errors
        console.log(err)
      }, () => {
        storage.ref('images').child(imageAsFile.name).getDownloadURL()
          .then(fireBaseUrl => {
            setImageAsUrl(prevObject => ({ ...prevObject, imgUrl: fireBaseUrl }))
          })
      })
  }


  const uploadTask = storage.ref(`/images/${imageAsFile.name}`).put(imageAsFile)
  uploadTask.on('state_changed',
    (snapShot) => {
      console.log(snapShot)
    }, (err) => {
      console.log(err)
    }, () => {
     
      storage.ref('images').child(imageAsFile.name).getDownloadURL()
        .then(fireBaseUrl => {
          setImageAsUrl(prevObject => ({ ...prevObject, imgUrl: fireBaseUrl }))
        })
    })

  return (
    <div className="App">
      <form onSubmit={handleFireBaseUpload}>
        <input
          type="file"
          onChange={handleImageAsFile}
        />

        <button>upload to firebase</button>
      </form>

      <img src={imageAsUrl.imgUrl} alt="image tag" />
    </div>
  );
}

export default App;

任何人都可以帮助我有什么问题吗？非常感谢

Answer 1

您必须为要使用的每个 Firebase SDK 添加一个导入。您没有为 Analytics 导入任何内容。

import firebase from 'firebase/app'
import 'firebase/storage'
import 'firebase/analytics'

有关更多信息，请参阅文档。