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

Posted 2023-02-22

【中文标题】类型错误：firebase_app__WEBPACK_IMPORTED_MODULE_0___default.a.analytics 不是函数

【英文标题】：TypeError: firebase_app__WEBPACK_IMPORTED_MODULE_0___default.a.analytics is not a function

【发布时间】：2020-11-29 20:06:19

【问题描述】：

我必须在 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  />
    </div>
  );


export default App;

谁能帮我解决什么问题？非常感谢

【问题讨论】：

在 Stack Overflow 上，不要分享文字图片。将文本复制到问题本身中，以便于阅读、复制和搜索。

【参考方案1】：

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

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

请参阅documentation 了解更多信息。