類型錯誤：firebase_app__WEBPACK_IMPORTED_MODULE_0___default.a.analytics 不是 function

Question

我必須在 Reactjs 和 firebase 存儲中上傳圖像。 但是在我運行它之后，它向我顯示了這個錯誤

這是我的src/firebase/firebase.js代碼。 我必須與我的 firebase 連接的地方

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'

有關更多信息，請參閱文檔。