如何解决此错误 TypeError: _components_firebase_Firebase__WEBPACK_IMPORTED_MODULE_2__.default.auth is not a function答案

【问题标题】：How do I fix this error TypeError: _components_firebase_Firebase__WEBPACK_IMPORTED_MODULE_2__.default.auth is not a function如何解决此错误 TypeError: _components_firebase_Firebase__WEBPACK_IMPORTED_MODULE_2__.default.auth is not a function
【发布时间】：2020-09-22 22:31:19
【问题描述】：

我将 Firebase 与 next.js 一起使用，并且我的文件设置如下所示。我正在尝试使用 firebase 客户端 sdk，但它似乎在注册时不起作用。

Firebase 应用初始化的 Firebase.js

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.
                            
                           
                          });

【问题讨论】：

我的代码类似，只是我的 firebase 导入行显示为import * as firebase from "firebase/app";，直到今天早上我将 firebase 包升级到 v7.20.0 时它一直在工作。我得到了同样的“身份验证不是函数”错误。我将 firebase 包降级到 v7.19.1 并且错误消失了。我猜这个 firebase 软件包版本中存在错误？
你是如何降级你的 firebase 包的
您可以只运行npm install firebase@7.19.0 或在您的package.json 文件中，将firebase 条目设置为读取"firebase": "7.19.1"，从版本号前面删除插入符号，然后重新运行npm install 重新安装所有软件包。只是不要忘记检查未来的升级，看看这个问题是否得到解决。
我发布了关于这个here的我自己的问题。对于它的价值，我正在玩弄其他依赖项的版本，以查看当代码突然再次开始为我工作时是否有任何影响问题。我尝试隔离修复，但不会重现问题！非常令人沮丧！我在想命令外壳可能有问题，应该早点重新启动它。这很奇怪！无论如何，它正在工作。

标签： javascript firebase next.js

【解决方案1】：

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

如果您想从全局 firebase 命名空间访问 auth() 函数，请考虑将其导出：

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

然后你可以在另一个源文件中导入它：

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

一般来说，您应该避免像现在使用的那样使用default 导出。单独命名每个导出要好得多。如果要公开整个 SDK，也可以考虑导出整个 firebase 命名空间。

【讨论】：

【解决方案2】：

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

尝试将底部更改为：

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

export default firebase;

附注当我第一次看到您的帖子时，我被自己的一个看似相似的问题所困扰，导致我在制作 cmets 时忽略了这个导出问题。我应该早点发现这个出口问题。这是我给自己的教训，不要妄下结论。

【讨论】：