VueJS Firebase app problem of export default error

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 ?

Renaud Tarnec · Accepted Answer · 2021-05-17T20:48:14.627

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.

Thank You For Sharing This, this actually worked !! – Patil May 18 '21 at 06:57 — Patil, May 18 '21 at 06:57

VueJS Firebase app problem of export default error

1 Answers1