在反应中使用上下文时如何初始化firebase？

Question

我正在尝试学习本教程：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 };

有谁知道如何解决这个问题。

Answer 1

您需要将其更改为：

import app from 'firebase/app';
import 'firebase/firestore'
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