Firebase：.default 不是构造函数

Posted 2023-04-14

【中文标题】Firebase：.default 不是构造函数

【英文标题】：Firebase: .default is not a constructor

【发布时间】：2020-03-30 21:10:00

【问题描述】：

我正在尝试关注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 应用凭据。

【问题讨论】：

如何在主代码中导出 Firebase 类/导入？

我更新了帖子以添加这些详细信息。

'../../firebase.1' 包含上面的 Firebase 类代码对吗？

Firebase 似乎是未定义的。至少从错误中。您可以在导入它并引发错误的主代码中控制台记录Firebase 的值吗？ （例如上面ReactDOM.render）是否按预期显示类？

是 - firebase.1 包含该类的 firebase 配置设置。

【参考方案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;

【讨论】：

非常感谢。我明天有时间看看你做了什么。 * import 带有一个firebase警告，除了在开发中之外不要使用它，所以我正在尝试导入特定的包。我明天看看，然后回来找你。

我找到了删除 firebase 消费者属性的解决方案。我没有使用您的解决方案，但为了感谢您尝试提供帮助，请给予积分

@Mel 谢谢！ （不确定这是多么合法。）你能用细节编辑我的帖子吗？或者更好的是做出自己的答案来描述与教程相关的变化。 （回答你自己的问题是完全可以的。我一直这样做，在 SO FAQ 中没问题）