AuthProvider在使用firebase auth时不是构造函数，VueJS Webpack

Posted 2023-02-22

【中文标题】AuthProvider在使用firebase auth时不是构造函数，VueJS Webpack

【英文标题】：AuthProvider is not a constructor when using firebase auth, VueJS Webpack

【发布时间】：2017-12-13 14:18:30

【问题描述】：

我目前正在使用 Vue JS Webpack 模板来构建我的应用程序。每次我尝试使用身份验证提供程序之一登录时，都会收到以下错误：

Login.vue?a071:44 Uncaught TypeError: WEBPACK_IMPORTED_MODULE_0__firebaseApp.a.auth.GoogleAuthProvider 不是构造函数

这是我的代码的相关部分： 我的 Firebase 配置文件

import firebase from 'firebase'
let config = 
  apiKey : 'xxxxxxx',
  authDomain: 'xxxxxx',
  databaseURL: 'xxxxxxx',
  projectId: 'yyyyyy'

export default firebase.initializeApp(config)

和我的Login.Vue登录方法

<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>

【问题讨论】：

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

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

您的 firebase 配置文件是否名为 firebaseApp.js？

见***.com/a/44353652/7814783。您可以将 firebase 设置为 Vue.prototype 并在组件中的任何位置使用 firebase。

【参考方案1】：

您尝试导入的是配置数据容器。 将您的 Firebase 配置文件更改为

import firebase from 'firebase'
let config = 
  apiKey : 'xxxxxxx',
  authDomain: 'xxxxxx',
  databaseURL: 'xxxxxxx',
  projectId: 'yyyyyy'

firebase.initializeApp(config)
export default firebase