AuthProvider is not a constructor when using firebase auth, VueJS Webpack

Question

I'm currently using Vue JS Webpack template to build my app. Everytime I try to login using one of the auth provider I get the following error :

Login.vue?a071:44 Uncaught TypeError: WEBPACK_IMPORTED_MODULE_0__firebaseApp.a.auth.GoogleAuthProvider is not a constructor

here are the relevant parts of my code :
my firebase config file

import firebase from 'firebase'
let config = {
  apiKey : 'xxxxxxx',
  authDomain: 'xxxxxx',
  databaseURL: 'xxxxxxx',
  projectId: 'yyyyyy'
}
export default firebase.initializeApp(config)

and my Login.Vue login method

<template>
	<div class="login">
		<div v-if="loading" class="modal-loading-white">
			<img class="loader-img" src="/img/loader-gray.svg">
		</div>
		<div>Login</div>
		<div v-show="this.errorMsg">{{ errorMsg }}</div>
		<div><label>Email </label>: <input type="email" v-model.trim="emailForm"/></div><br>
		<div><label>Password </label>: <input type="password" v-model.trim="passwordForm"/></div><br>
		<button v-on:click="logInUserWithProvider('email')">Login</button><br>
		<div><router-link to="forgot">Forget Your Password?</router-link></div>
		<button v-on:click="logInUserWithProvider('google')">Google</button>
		<button v-on:click="logInUserWithProvider('facebook')">Facebook</button>
	</div>
</template>

<script>
  import firebase from '../firebaseApp'
  export default {
	name: 'loginForm',
	data: function () {
		return {
			emailForm:'',
			passwordForm: '',
			errorMsg: '',
			loading: false
		}
	},
	methods: {
		logInUserWithEmail: function() {
			if (this.emailForm && this.passwordForm) {
				this.loading = true;
				firebase.auth().signInWithEmailAndPassword(this.emailForm, this.passwordForm).catch(function (error) {
					this.errorMsg = error.message;
					this.loading = false;
				}.bind(this));
			} else {
				this.errorMsg = 'Email and password can\'t be empty';
			}
		},
		logInUserWithProvider: function(provider) {
			if (provider == 'google') {
				var authProvider = new firebase.auth.GoogleAuthProvider();
				this.loading = true;
				firebase.auth().signInWithRedirect(authProvider);
			} else if (provider == 'facebook') {
				var authProvider = new firebase.auth.FacebookAuthProvider();
				this.loading = true;
				firebase.auth().signInWithRedirect(authProvider);
			} else if (provider == 'email') {
				this.logInUserWithEmail();
			}

			firebase.auth().onAuthStateChanged((user) => {
				if (user) {					
					this.emailForm = '';
					this.passwordForm = '';
					this.$emit('login');
				}
			});
		}
	}	
  }
</script>

Answer 1

what you were trying to import is config data container. Change your firebase config file to

import firebase from 'firebase'
let config = {
  apiKey : 'xxxxxxx',
  authDomain: 'xxxxxx',
  databaseURL: 'xxxxxxx',
  projectId: 'yyyyyy'
}
firebase.initializeApp(config)
export default firebase