VueJS Firebase app導出默認錯誤的問題

Question

我正在嘗試使用 vue 2 和 firebase 最新創建 crud 應用程序，這是我的 firebase.js 文件

import firebase from 'firebase/app'
import 'firebase/auth'
import 'firebase/firestore'


const firebaseConfig = {
   stuff
  };

firebase.initializeApp(firebaseConfig);
const database = firebase.firestore()
const auth = firebase.auth()

const usersCollection = database.collection('users')

export{
 
    database,
    auth,
    usersCollection
}

這是我的 store/index.js 文件

import Vue from "vue";
import Vuex from "vuex";
import fb from "../../firebase"

import router from "../router";
Vue.use(Vuex);

export default new Vuex.Store({
  state: {
   userProfile:{}
  },
  
  mutations: {
   
    setUserProfile(state,val)
    {
      state.userProfile=val
    },
    setPerformingRequest(state,val)
   {
     state.performingRequest=val
   }
  },
  actions: {

    async login({dispatch},form)
    {
      const{user} = await fb.auth().signInWithEmailAndPassword(form.email,form.password)
      dispatch('fetchUserProfile',user)
    },


    async signUp({dispatch},form)
    {

       const {user} = await fb.auth().createUserWithEmailAndPassword(form.email,form.password)

      //  create user object in userCollection

      await fb.usersCollection.doc(user.uid).set({
        firstName:form.firstName,
        middleName:form.middleName,
        lastName:form.lastName,
        email:form.email,
        password:form.password,
        gender:form.gender,
        age:form.user_age
      })

      dispatch('fetchUserProfile',user)

    },

    async fetchUserProfile({commit},user)
    {
      // fetching user profile data into constant named userProfile
      const userProfile = await fb.usersCollection.doc(user.uid).get()

      // setting the fetched data from firebase to state of userProfile
      commit('setUserProfile',userProfile.data())

      // now changing route to dashboard

      if(router.currentRoute.path ==='/')
      {
        router.push('/Dashboard')
      }

    },
  
    async logOut({commit})
    {
          
      // log user out
      await fb.auth.signOut()

      //  clear user data from state

      commit('setUserProfile',{})

      // changing route to homepage
      router.push('/')
    }



  },
  modules: {},
});

應用程序在瀏覽器控制台中運行時出現警告Uncaught (in promise) TypeError: firebase__WEBPACK_IMPORTED_MODULE_4 _.default is undefined and in vs code terminal
“在'../../firebase'中找不到導出'default'（導入為'fb'）和
因此，既沒有用戶注冊，也沒有創建文檔
有誰知道如何做到這一點？

Answer 1

更改為

const fb = require('../../firebase.js');

或者

import { auth, usersCollection } from "../../firebase";   

在商店文件中應該可以解決問題。

---

在第一種情況下，您還需要更改

await fb.auth().createUserWithEmailAndPassword

至

await fb.auth.createUserWithEmailAndPassword

---

在第二種情況下，改變

await fb.auth().createUserWithEmailAndPassword

至

await auth.createUserWithEmailAndPassword

在這種情況下，還要注意，如果您要在store/index.js文件中使用database ，您還需要導入database ，例如：

import { database, auth, usersCollection } from "../../firebase"; 

---

更多解釋here和here 。