AuthProvider在使用Firebase身份验证时不是构造函数，VueJS Webpack

我目前使用Vue JS Webpack模板来构建我的应用程序。每次我尝试使用身份验证提供者我得到下面的错误之一登录：AuthProvider在使用Firebase身份验证时不是构造函数，VueJS Webpack

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

这里是我的代码的相关部分：
我的火力配置文件

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

和我的登录。 Vue的登录方法

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

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

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

来源

2017-07-09 Irham Nur Hakim

您能否提供完整的Login.vue文件？ – follio

@Follio我已经添加了Login.vue的完整代码 –

是您的firebase配置文件，名为firebaseApp.js？ – follio

你试图导入的是配置数据容器。将您的firebase配置文件更改为

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

来源

2017-07-10 04:43:06 follio

AuthProvider在使用Firebase身份验证时不是构造函数，VueJS Webpack

回答

相关问题