我正在尝试遵循本教程:https://www.robinwieruch.de/complete-firebase-authentication-react-tutorial
我在这一步陷入困境:
Context.jsx
import React from 'react';
const FirebaseContext = React.createContext(null);
export default FirebaseContext;
index.js
import firebase from "./firebase";
import FirebaseContext from './components/firebase/Context';
ReactDOM.render(
<FirebaseContext.Provider value={new firebase()}>
<App />
</FirebaseContext.Provider>,
document.getElementById('root'),
);
[当我尝试实现它时,它会产生一个错误:
TypeError:_firebase__WEBPACK_IMPORTED_MODULE_5 __。default不是构造函数
[当我搜索该错误消息时,我得到old posts,它表示Firebase文档在最近几年已更改,但本教程比该更改更新。
我的firebase.js具有:
import * as firebase from "firebase";
import firestore from "firebase/firestore";
import 'firebase/auth';
const config = {
apiKey: "",
authDomain: ".firebaseapp.com",
databaseURL: ".firebaseio.com",
projectId: "",
storageBucket: ".appspot.com",
messagingSenderId: "",
appId: ""
};
firebase.initializeApp(config);
const database = firebase.database();
const fsDB = firebase.firestore();
const settings = { timestampsInSnapshots: true };
export { firebase, database as default, fsDB, settings };
有人知道如何解决这个问题。
您需要将其更改为:
import app from 'firebase/app';
import 'firebase/auth';
import 'firebase/database';
const config = {
apiKey: "",
authDomain: ".firebaseapp.com",
databaseURL: ".firebaseio.com",
projectId: "",
storageBucket: ".appspot.com",
messagingSenderId: "",
appId: ""
};
class Firebase {
constructor() {
app.initializeApp(config);
this.database = firebase.database();
this.fsDB = firebase.firestore();
}
}
export default Firebase