Firebase initialization error in VueJS Project

Question

first time posting here. Also quite new to VueJS, know some Angular.

I ran into an error when initializing Firebase(first time getting this error) in my VueJS project:

That showed up briefly after click event, so I had to slow down my network to take screenshot.

I've included <script src="https://www.gstatic.com/firebasejs/5.5.5/firebase.js"></script> in index.html
I also installed firebase(latest version) via npm with --save

And created 2 files: firebaseInit.js and firebaseConfig.js(which contains the api key, etc for web app):

In firebaseInit.js:

import firebase from 'firebase';
import 'firebase/firestore';
import firebaseConfig from './firebaseConfig';

const firebaseApp= 
firebase.initializeApp(firebaseConfig);

export default firebaseApp.firestore();

and put:

export default { the config key value pairs obtained 
from Firebase console }

in firebaseConfig.js.

Extra info(though I don't think this is the source of the problem):

I imported firebase with import firebase as 'firebase' in the vue file I used firebase auth() and createUserWithEmailandPassword() in the methods property, but alert() doesn't work.

import firebase from 'firebase';

export default {
  name: 'register',
  data: function() {
    return {
      email: '',
      password: ''
    };
  },
  methods: {
    register: function(e) {
      firebase
        .auth()
        .createUserWithEmailAndPassword(this.email, this.password)
        .then(
          user => {
            alert(`Account made for ${user.email}`);
            this.$router.push('/');
          },
          err => {
            console.log(err.message);
          }
        );

      e.preventDefault();
    }
  }
};

You don't need to include the <script> tag if you're building your app with the npm version — Phil
– Phil, Commented Oct 24, 2018 at 3:01
I think I see the problem... nothing is importing / executing your firebaseInit.js file. That should be the file that exports your firebase app, then you can all auth(), etc on the app — Phil
– Phil, Commented Oct 24, 2018 at 3:24
Oh. facepalm Thanks again. Though, I don't get why the alert() inside register function isn't showing when I click the button, — Connie
– Connie, Commented Oct 24, 2018 at 4:31
Because firebase.auth() throws an error. You're meant to call auth() on your firebaseApp object — Phil
– Phil, Commented Oct 24, 2018 at 4:35

TommyF · Accepted Answer · 2018-10-24 10:29:19Z

1

You created your firebaseInit.js but since you never import or require it, is it never executed, thus resulting in a "firebase not initialized" error when you try to use the firebase you imported from the generic firebase module instead.

Use export default firebaseApp in your firebaseInit.js (and not firestore as you do now) and then import firebase from 'path/to/firebaseInit.js' for example.

answered Oct 24, 2018 at 10:29

TommyF

7,1708 gold badges39 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Firebase initialization error in VueJS Project

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related