Firebase：.default 不是构造函数

Question

我正在尝试关注this tutorial。

我目前停留在将反应上下文引入 firebase 的步骤中。

这个代码块是当前问题的根源：

import Firebase, { FirebaseContext } from './components/firebase';

ReactDOM.render(
  <FirebaseContext.Provider value={new Firebase()}>
    <App />
  </FirebaseContext.Provider>,
  document.getElementById('root'),
);
serviceWorker.unregister();

当我尝试这个时，我收到一条错误消息：

TypeError:_components_firebase__WEBPACK_IMPORTED_MODULE_5__.default 不是构造函数

我见过this post，它与 Vue 相关，但表示 .default 错误的原因不是构造函数（而不是其余部分），因为不应使用 new 关键字调用 Firebase 对象。

我尝试删除新的，但会生成一条错误消息：

TypeError: Object(...) 不是函数

我想知道这是否与本教程为 firebase 配置应用程序的不寻常方式有关 - 这是一个使用构造函数的类（仍然不明白为什么要这样做）：

class Firebase {
  constructor() {
    app.initializeApp(config);
    this.auth = app.auth();
    this.db = app.database();
  }
export default Firebase;

是否有人将 Firebase 与 React 结合使用，知道如何使用上下文 API，如果知道，您是否找到解决此问题的方法？

firebase 配置设置文件是：

索引：

import FirebaseContext, { withFirebase } from './Context';
import Firebase from '../../firebase.1';
export default Firebase;
export { FirebaseContext, withFirebase };

上下文：

import React from 'react';
const FirebaseContext = React.createContext(null);
export const withFirebase = Component => props => (
  <FirebaseContext.Consumer>
    {firebase => <Component {...props} firebase={firebase} />}
  </FirebaseContext.Consumer>
);
export default FirebaseContext;

下一次尝试

我找到了this post，看起来它可能一直在尝试遵循相同的教程。

这种方法要求我在 firebase.1.js 配置文件中添加回 auth 方法，使其现在看起来像这样：

class Firebase {
  constructor() {
    app.initializeApp(config).firestore();
    this.auth = app.auth();
    // this.db = app.database();

    // this.db = app.firebase.database()
    this.db = app.firestore();

  }  

  doCreateUserWithEmailAndPassword = (email, password) =>
    this.auth.createUserWithEmailAndPassword(email, password);  
}

那么，表单中的提交处理程序是这样的：

handleCreate = values => {
    values.preventDefault();

    const { name, email, password } = this.state;

    Firebase
    .doCreateUserWithEmailAndPassword = (email, password) => {
      return this.auth
        .createUserWithEmailAndPassword(email, password)
        .then((res) => {
        Firebase.firestore().collection("users").doc(res.user.uid).set({
          email: values.email,
          name: values.name,
          role: values.role,
          createdAt: Firebase.FieldValue.serverTimestamp()
        }).then(() => this.history.push(ROUTES.DASHBOARD));
      })
      .catch(err => {
        console.log(err.message);
      });
  };
};

当我尝试这个时，我没有收到任何错误，但表单没有提交 - 它只是挂起。

下一次尝试

由于 FirebaseContext.Consumer 包含一行小写 firebase，因此我尝试了上述所有相同步骤，但将标题大小写 Firebase 替换为小写 firebase。我也试过this.firebase（我不知道为什么）和this.props.firebase（我看过其他帖子尝试过，但仍然不知道为什么）。

这些方法都不起作用。

当我尝试在 FirebaseContext.Provider 上方运行 console.log(Firebase) 时，我得到了一个很大的日志，其中包含许多以以下开头的下拉菜单：

FirebaseAppImpl {firebase_: {…}, isDeleted_: false, services_: {…}, tokenListeners_：数组（0），analyticsEventRequests_：数组（0），...} 内部：{分析：{…}，getUid：ƒ，getToken：ƒ， addAuthTokenListener: ƒ, removeAuthTokenListener: ƒ}

此日志中的一个下拉菜单标记为“options_”，其中包含我的 Firebase 应用凭据。

Answer 1

我认为这可能与问题in my recent other answer有关。

我设法通过简化导入/导出设置让new Firebase 工作。

在 react 应用中，导入现在是：

import { FirebaseContext } from './components/context';
import Firebase from './components/firebase';

在我将 components/firebase.js 中复杂的“导入和重新导出”代码替换为教程中的 class Firebase 的定义之后，这些导入和 new 起作用。

在此之后弹出另一个错误Firebase: Firebase App named '[DEFAULT]' already exists (app/duplicate-app).，但这可能是因为我没有遵循整个教程并且缺少一些配置。

如果没有项目的完整源代码，复制您正在处理的所有内容是相当困难的。

这是我在npx create-react-app react-firebase-authentication 和安装firebase 之后使用的测试App.js。

import React from 'react';
import logo from './logo.svg';
import './App.css';

import { FirebaseContext } from './components/context';
import Firebase from './components/firebase';

function App() {
    const foo = new Firebase()
    return (
    <div className="App">
      ... omitted ...
    </div>
  );
}

export default App;