javascript - 在 react 中使用上下文时如何初始化 firebase？

Question

我正在尝试按照本教程进行操作:https://www.robinwieruch.de/complete-firebase-authentication-react-tutorial

我卡在这一步了:

上下文.jsx

import React from 'react';

const FirebaseContext = React.createContext(null);

export default FirebaseContext;

索引.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 is not a constructor

当我用谷歌搜索该错误消息时，我得到 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