我正在尝试按照指令here使用firebase ui设置firebase auth .
我用纱线添加了firebase ui模块 . 我的反应应用程序中的根目录中有一个firebase文件夹 . 在其中,我有一个firebase.js文件:
import * as firebase from 'firebase';
import * as firebaseui from 'firebaseui'
const config = {
apiKey: process.env.FIREBASE_API_KEY,
authDomain: process.env.FIREBASE_AUTH_DOMAIN,
databaseURL: process.env.FIREBASE_DATABASE_URL,
projectId: process.env.FIREBASE_PROJECT_ID,
storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID
};
firebase.initializeApp(config);
const database = firebase.database();
firebase.auth().createUserWithEmailAndPassword(email, password).catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
// ...
});
当我尝试检查我是否正确时,我收到一个控制台错误,指出:
firebaseApp.js:339 Uncaught FirebaseError {code: "app/duplicate-service", message: "Firebase: Firebase service named 'auth' already registered (app/duplicate-service).", name: "auth", stack: "auth: Firebase: Firebase service named 'auth' alre…t
我不会在应用程序中的任何其他位置调用firebase,所以我认为这可能是一个错误的唯一方法是firebaseui已经导入firebase . 我尝试删除第一个import语句,但是然后出现错误,说明没有定义firebase .
有谁知道如何正确设置?我见过this question . 我可以看到方法上的差异 . 我已经尝试使用问题中使用的配置语句 . 我仍然遇到同样的问题 .
自从发布这个问题以来,我聘请了一些人为我设置这个问题 . 尽管花了400美元,我仍然有这个问题 . 其他问题已经发布了这个问题,并确定了角度闪光的重复 . 我不使用角度 .
上班承包商设置如下:
const config = {
apiKey: settings.FIREBASE_API_KEY,
authDomain: settings.FIREBASE_AUTH_DOMAIN,
databaseURL: settings.FIREBASE_DB_URL,
projectId: settings.FIREBASE_PROJECT_ID,
storageBucket: settings.FIREBASE_STORAGE_BUCKET,
messagingSenderId: settings.FIREBASE_MESSAGE_ID,
}
if (!firebase.apps.length) {
firebase.initializeApp(config);
}
const database = firebase.database();
const auth = firebase.auth()
export {firebase, auth, database };
firebase.auth的这个块中有一个额外的const . 我尝试删除它,但它没有任何区别 . 控制台错误仍然出现 .
我上面链接的SO问题显示了从库导入的import语句 . 我的所有import语句都导入了我的firebase.js文件,该文件本身导入了firebase . 我想知道这是不是重复?但是,导入中有if语句,所以我无法理解为什么会出现问题 . 我在我的组件中导入FirebaseUI,但我无法弄清楚是否以某种方式导入firebase重复 .
我正在寻找一个有反应的解决方案 . 有没有人知道如何配置firebase与react应用程序一起使用?
3 回答
我'm not sure what'继续你的错误,但我创建了一个带有
create-react-app
的React应用程序,并让它立即运行 .首先我创建了'firebase.js':
然后将现有的App.js编辑成:
Firebaseui将为您创建用户,您无需手动执行此操作 . 如果它找不到元素,它也会抛出一个讨厌的错误,所以确保你没有在页面上没有元素的情况下调用它!
如果你需要在登录或注销时运行一个函数,你可以挂钩到
firebase.auth.onAuthStateChanged
:我怀疑你的错误与
firebaseui
干扰了firebase.auth()
有关,但试试我可能无法重现它 .import * as firebaseui from 'firebaseui'
应为import firebaseui from 'firebaseui'
.我也遇到了这个问题,最有可能的原因是最近npm没有使用windows上最新版本的firebase .
问题是node_modules / firebasui / dist / npm.js中的文件是第一行 .
我用以下内容代替:
我认为先导入firebase并明确放入window对象然后导入firebaseui:
var firebase = require('firebase'); window.firebase = firebase; var firebaseui = require('firebaseui');