Question

我正在将Firebase与next.js一起使用，并且我已按如下所示设置了文件。我正在尝试使用Firebase客户端sdk，但似乎无法进行注册。

Firebase.js在其中初始化了Firebase应用程序

import firebase from 'firebase/app'
import 'firebase/auth'
const config = {
    apiKey: process.env.FIREBASE_API_KEY,
    authDomain: process.env.FIREBASE_AUTH_DOMAIN,
    databaseURL: process.env.FIREBASE_DATABASE_URL,
    projectId: process.env.FIREBASE_PROJECT_ID,
    storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.FIREBASE_APP_ID,
    measurementId: process.env.FIREBASE_MEASUREMENT_ID
};

export default function initFirebase() {
  if (!firebase.apps.length) {
    
    firebase.initializeApp(config)
  }
}

在此注册的错误代码出现错误的功能。

import Firebase from "../../components/firebase/Firebase";

    Firebase.auth().createUserWithEmailAndPassword(email, password).catch(function(error) {
                            // Handle Errors here.
                            
                           
                          });

Answer 1

您没有从Firebase.js导出名为auth的任何内容。这就是错误消息试图告诉您的内容。如果不导出，则导入后将无法访问。

如果要从全局firebase命名空间访问auth（）函数，请考虑将其导出：

export function auth() {
    return firebase.auth();
}

然后您可以将其导入另一个源文件：

import { auth } from "../../components/firebase/Firebase";
auth().createUserWithEmailAndPassword(...);

通常，您应该避免像现在使用的那样使用default导出。最好单独命名每个出口。如果要公开整个SDK，也可以考虑导出整个firebase名称空间。

Answer 2

我认为Firebase.js模块的问题在于您正在导出initFirebase函数而不是firebase本身。

尝试将底部更改为：

if (!firebase.apps.length) {
  firebase.initializeApp(config)
}

export default firebase;

P.S。当我第一次看到您的帖子时，我陷入了一个看似相似的问题，导致我在发表评论时忽略了这个出口问题。我应该早点抓到这个出口问题。这是我给自己的关于不跳结论的教训。

如何解决此错误TypeError：_components_firebase_Firebase__WEBPACK_IMPORTED_MODULE_2 __。default.auth不是函数

2 个答案: