如何修復此錯誤 TypeError: _components_firebase_Firebase__WEBPACK_IMPORTED_MODULE_2__.default.auth is not a function

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;

PS 當我第一次看到你的帖子時，我被自己一個看似相似的問題所困擾，導致我在發表評論時忽略了這個導出問題。 我應該早點發現這個出口問題。 這是我給自己的關於不要急於下結論的教訓。