VueJS Firebase app导出默认错误的问题

Question

I'm trying to create crud app with vue 2 and firebase latest, & this is my firebase.js file

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
}

and here is my store/index.js file

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: {},
});

the application runs with warning in browser console Uncaught (in promise) TypeError: firebase__WEBPACK_IMPORTED_MODULE_4 _.default is undefined and in vs code terminal
"export 'default' (imported as 'fb') was not found in '../../firebase' and
because of that neither user is getting registered nor the document is getting created
Does anyone know how to do this?

Answer 1

Changing to

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

or to

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

in the store file should do the trick.

---

In the first case, you need to also change

await fb.auth().createUserWithEmailAndPassword

to

await fb.auth.createUserWithEmailAndPassword

---

In the second case, change

await fb.auth().createUserWithEmailAndPassword

to

await auth.createUserWithEmailAndPassword

In this case, also note that if you would use database in the store/index.js file you would need to import database as well, like:

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

---

More explanations here and here .