【问题标题】：firebase.auth is not a functionfirebase.auth 不是函数
【发布时间】：2018-07-13 13:02:33
【问题描述】：

我正在使用带有 firebase 和 firebase-admin 的 Webpack。

安装 firebase 我跑了：

npm install --save firebase

我正在使用以下方式导入 firebase：

import * as firebase from 'firebase/app'
import 'firebase/auth'

我也试过了：

import * as firebase from 'firebase'

我试过了：

const firebase = require('firebase')

正如web get started guide 中所建议的那样。

但是，当我尝试使用 firebase.auth() 时出现错误：

console.js:32 TypeError: firebase.auth is not a function

当我使用调试器检查firebase 时，我发现它实际上没有auth 函数：

> firebase
 {__esModule: true, initializeApp: ƒ, app: ƒ, Promise: ƒ, …}

如何使用 webpack 将 auth() 作为函数包含在内？

【问题讨论】：

您确定安装了最新版本的 Firebase 吗？他们每天都会进行升级，所以我总是检查以确保我的版本是最新的。 Firebase Releases
您能否确认您已成功初始化 Firebase 应用程序？其他位是否正常工作，例如数据库。
如果您不确定，我在joshpitzalis.svbtle.com/setup 写了一个设置指南，在joshpitzalis.svbtle.com/auth 写了一个特定于身份验证的指南。如果您仍然遇到问题，请告诉我们。
我也遇到了同样的问题，我安装了 yarn 并修复了错误。
CommonJS 模块： const firebase = require('firebase/app');要求（'firebase/'）； ES 模块：从 'firebase/app' 导入 firebase；导入'firebase/'；打字稿：从'firebase / app'导入*作为firebase；导入'firebase/'；其中 PACKAGE 是您要使用的单个 Firebase 服务。

标签： javascript reactjs firebase webpack

【解决方案1】：

我通过删除我的 node_modules 目录并重新安装所有内容来解决此问题。

我也像这样导入 firebase：

import firebase from 'firebase'
require('firebase/auth')

【讨论】：

我过去也是这样做的。
也为我工作，但我不需要重新安装 node_modules。谢谢。
这对我不起作用，并且似乎是当您将 firebase 和 firebase-admin 安装在同一个包中时出现的问题。降级到 firebase@v4.7.0 对我有用，问题出现在 firebase@v4.8.0。该问题正在此处的 firebase 存储库中讨论](github.com/firebase/firebase-js-sdk/issues/752)。
可以确认@isTravis 的信息解决了我的问题。我的 package.json 中有两个 firebase 5.4.1 和 firebase-admin 6.0.0。 npm update firebase 将我升级到 5.5.4 并且 firebase.auth() 不是开始出现的功能问题。 firebase-admin 包甚至没有在我的应用程序中使用，所以我 npm uninstall firebase-admin 并且一切都再次开始工作。
哇，搜索了三个小时后，这解决了我的问题。谢谢

【解决方案2】：

问题不在于node_modules，而在于您导入组件的方式。

当你以 ES6 方式导出组件时，通常是 export default () => { console.log('default component export'); };

default 是这里的关键字，当您以 ES6 方式导入 import firebase from 'firebase' 之类的组件时，它会从导出的对象中获取 default 属性。

记住上面的例子，这就是你做错了什么。

使用 ES6：

import * as firebase from 'firebase'

console.log(firebase.auth) // Undefined
console.log(firebase.default.auth) // Function

使用 ES5：

var firebase = require('firebase')

console.log(firebase.auth) // Undefined
console.log(firebase.default.auth) // Function

注意.default

【讨论】：

你测试过这个吗？当我运行它时，我得到了 auth 和 default.auth 的有效条目。我的控制台：snag.gy/fWIUCs.jpg 和我的代码：snag.gy/hyAoum.jpg
我试过时没有用。虽然在节点上试过，而不是在浏览器上
我明白了。我在浏览器中试过。我认为这个问题可能与 webpack 相关，这就是我使用浏览器的原因
“总是喜欢非货物崇拜的答案”。所以如果我理解：（a）重新安装包是一个红鲱鱼。 (b) 要么require ('firebase') 然后firebase.default.auth 要么require(firebase/auth)` 然后firebase.auth。 +1
@radarbob 似乎取决于您使用的环境。我测试了 Joao 的答案，但它在我的环境中不起作用。我被一些疯狂的 Babel Webpack 第 1 版恶作剧所困。通过重新安装软件包为我解决了这个问题，并且该答案已被多次投票，这意味着它可能也适用于其他人。所以自动奖励了这个答案。无论如何，Joao 的回复似乎确实有助于澄清这个新世界中有关 javascript 导入的一些事情，尽管它并没有解决我遇到的问题。

【解决方案3】：

我一直收到一个错误提示

“TypeError：firebase.auth 不是函数”

我得到了 auth 对象，我做的不同的事情是以不同的顺序安装模块。

我第一次安装模块时（这是 auth 对象没有出现的时候）：

// this seems to confuse things with the auth object when installed in this order
$ npm install firebase-admin --save
$ npm install firebase --save

我删除了 npm 文件夹并从头开始，虽然这次我颠倒了安装顺序：

// for some reason this worked and now I can access the auth object
$ npm install firebase --save
$ npm install firebase-admin --save

我没有做任何其他事情。我只是颠倒了安装顺序，先安装 firebase，然后再安装 firebase-admin。

我希望这对其他人有用。

You can read more about it here

【讨论】：

我知道这很奇怪。我为此头疼了几个月，做了很多研究，没有任何效果。我只是随机决定尝试一下，它奏效了。这实际上是一个幸运的猜测。 ??‍♂️
为我工作，谢谢！详情在这里：github.com/firebase/firebase-js-sdk/issues/…
请注意，firebase-admin（它只是一个具有管理员权限的 firebase 客户端）不打算在 reactJS 或 VueJS 等前端应用程序中使用，而只能在安全服务器环境中使用，如docs firebase.google.com/docs/auth/admin/manage-users#create_a_user 否则这将是一个很大的安全漏洞。一种解决方案是使用云功能并通过非管理员客户端可以执行的操作来触发它

【解决方案4】：

只需添加 >

import firebase from '@firebase/app';
require('firebase/auth');

进入你的项目

【讨论】：

为什么需要而不是导入？
您也可以使用导入语句； ``` 从 'firebase/app' 导入 Firebase；导入'firebase/auth'； ```

【解决方案5】：

这是来自官方docs的导入声明：

// Firebase App (the core Firebase SDK) is always required and must be listed first
import firebase from "firebase/app";
// Add the Firebase products that you want to use
import "firebase/auth";
console.log(firebase.auth);

~~如果您只需要身份验证，这些似乎也可以工作：~~ 编辑：下面的代码适用于 Firebase 7 包，但不再适用于版本 8。Firebase 9 将再次更改。只要坚持文档，你会没事的。

import { auth } from "firebase/app";
import "firebase/auth";
console.log(auth);

或

import { auth } from "firebase";
console.log(auth);

【讨论】：

【解决方案6】：

虽然这个问题背后有很多根本原因，但也可能是这样一个简单的原因。

我忘记包含 auth 和 db 的 js 文件，虽然我在 JS 代码中使用它们。

修复前；

<!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/6.1.1/firebase-app.js"></script>

修复后；

<!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/6.1.1/firebase-app.js"></script>

<!-- Add Firebase products that you want to use -->
<script src="https://www.gstatic.com/firebasejs/6.1.1/firebase-auth.js"></script>

<script src="https://www.gstatic.com/firebasejs/6.1.1/firebase-database.js"></script>

【讨论】：

这是正确答案。虽然 ``firebase-app.js 需要首先包含在内，但其他 SDK（用于身份验证、数据库等）必须单独添加。在 ES6 中使用它时，必须单独导入或需要特定的 SDK。

【解决方案7】：

这是因为没有添加 firebase-auth 脚本。

首先你必须在你的节点模块中安装 npm 文件

npm install firebase --save
npm install firebase-admin --save

那么你必须在firebase-app脚本之后添加firebase.auth的脚本并且确保版本相同。

修复前：

<script src="https://www.gstatic.com/firebasejs/7.8.1/firebase-app.js"></script>

修复后您需要添加脚本并在此之后添加您的 Firebase 帐户脚本，如下所示

<script src="https://www.gstatic.com/firebasejs/7.8.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.8.1/firebase-auth.js"></script>

那么它应该可以正常工作

【讨论】：

是的。奇怪的是，在授权包的入门文档中，firebase-auth 脚本没有被显着地提及。它出现在“添加 Firebase SDK”部分的返回链接中：firebase.google.com/docs/web/…

【解决方案8】：

你只需要使用如下的导入

import firebase from "firebase/app";
import "firebase/firestore";
import "firebase/auth";

在上述情况下，auth 和 DB 服务都在使用。对于任何其他服务，您只需要像这样导入。

【讨论】：

【解决方案9】：

此错误的主要原因可能是最新的 Firebase 版本 v9.1.1，在此版本中 Firebase 导入已更改。

Before: version 8

import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';

// v9 compat packages are API compatible with v8 code
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

在此处查看文档：https://firebase.google.com/docs/web/modular-upgrade

【讨论】：

这是最新 Firebase 的正确解决方案。使用 'require' 获得类似结果：const firebase = require("firebase/compat/app"); require("firebase/compat/auth"); require("firebase/compat/firestore");

【解决方案10】：

在 Node 中运行并且需要 firebase 和 firebase-admin 这对我有用：

首先安装firebase，然后按此顺序安装firebase-admin。

然后这样使用：

const app = require('@firebase/app');
require('@firebase/auth');
require('@firebase/firestore');

const firebase = app.firebase

firebase.initializeApp({…})

const auth = firebase.auth()
const db = firebase.firestore()

【讨论】：

【解决方案11】：

我也遇到过这个。我的问题是安装了 npm 模块 @firebase 以及 firebase 模块。当我在我的 JavaScript 代码中使用 ‘require(“firebase”)’ 需要 firebase 时，webpack 出于某种原因捆绑了 @firebase。

@firebase 默认不包括身份验证、数据库等...它是模块化的，因此您可以单独要求它们。因此，当我尝试调用 auth() 时，我收到了上述错误。

要修复它，您可以删除@firebase...或者在需要时添加正确firebase的完整路径

require('/path/to/node_modules/firebase/firebase.js')

【讨论】：

这个答案似乎很混乱。当然 @firebase 已安装（它本身不是模块；它是一个“范围”，在该范围内有诸如 app 或 database 之类的模块）。这是实现各种 firebase 模块的大部分逻辑的地方。顺便问一下，你建议“删除”@firebase 是什么意思？

【解决方案12】：

有同样的问题，我认为是因为版本问题。我通过删除node_modules 和所有webpack 生成的东西并从here 获取版本来解决它。
顺便说一句，我认为这是非常奇怪的行为，因为它应该像官方文档中那样工作。

【讨论】：

【解决方案13】：

我遇到了同样的问题。但是我不必删除任何文件，只需更正导入语句。就我而言，我在 Gatsby/React 应用程序中使用 Firebase 版本 7.7.0，这就是导入的样子：

import React from 'react';
import firebase from 'firebase/app';
import 'firebase/auth';

const config = {
  apiKey: process.env.GATSBY_FIREBASE_API_KEY,
  authDomain: process.env.GATSBY_FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.GATSBY_FIREBASE_DATABASE_URL,
  projectId: process.env.GATSBY_FIREBASE_PROJECT_ID,
  storageBucket: process.env.GATSBY_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.GATSBY_FIREBASE_MESSAGING_SENDER_ID,
};

class Firebase {
  constructor() {
    firebase.initializeApp(config);
    this.auth = firebase.auth();
    this.uiConfig = {
      signinOptions: [
        firebase.auth.GoogleAuthProvider.PROVIDER_ID,
        firebase.auth.FacebookAuthProvider.PROVIDER_ID,
        firebase.auth.EmailAuthProvider.PROVIDER_ID,
      ],
    };
  }
}
export default Firebase;

const FirebaseContext = React.createContext(null);
export { FirebaseContext };

@Mel 请求后更新。上下文可以使用 HOC：

export const withFirebase = Component => props => (
  <FirebaseContext.Consumer>
    {firebase => <Component {...props} firebase={firebase} />}
  </FirebaseContext.Consumer>
);

或使用钩子：

import { FirebaseContext } from './firebase';
const MyComponent = () => {
  const firebase = useContext(FirebaseContext);
  // do something with firebase
};

【讨论】：

我遇到了同样的问题。我的配置文件看起来像你的。请你告诉我你是如何在上下文配置中使用的。我卡在这个错误上，找不到解决办法
@Mel 我添加了如何使用上下文的示例。然而，最后我改用gatsby-plugin-firebase，因为它开箱即用，只需要添加firebase设置。这样我就不必再发明轮子了。希望它对你有用。

【解决方案14】：

Firebase 8 引入了一些重大更改。

https://firebase.google.com/support/release-notes/js#version_800_-_october_26_2020

如果你使用 .default，现在你可以让它像这样工作：

const firebase = require('firebase/app').default
require('firebase/auth')

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

const auth = firebase.auth()

【讨论】：

我在打字稿中使用import { default as firebase } from 'firebase/app';

【解决方案15】：

这可能会解决问题，试试这个>>>

import firebase from 'firebase/app';
import 'firebase/firestore';
import 'firebase/auth';

const firebaseConfig = {  };

  const firebaseApp = firebase.initializeApp(firebaseConfig);
  const auth = firebase.auth();
  const provider = new firebase.auth.GoogleAuthProvider();

  export { auth, provider };

很可能你忘了在这一行加上'new' --->

const provider = new firebase.auth.GoogleAuthProvider();

再次检查。

【讨论】：

【解决方案16】：

怎么了。我在学习 William Candillon 的 Adding Firebase To React Native 教程时遇到了这个问题...

想法：Firebase 有很多值得喜爱的地方。但是导入/导出、命名 vs 默认和版本控制似乎给很多人带来了很多不必要的心痛。

简单地说：我有firebase.auth is not a function。通过node_modules寻找，删除，重新纱线，阅读博客，尝试按命名然后默认导入，在firebase本身的默认导入下需要单独的模块a-la require('firebase/auth');等等等等（它真的不应该是这个难的）。另外，为什么谷歌没有反应文档？现在是 2018 年。人们还在认真地把 HTML 脚本标签放在他们的前端吗？

当前解决方案 => 最后，我将所有配置和 firebase.initializeApp(config) 拉到了我的顶级 app.js 中。稍后我将不得不找时间弄清楚为什么无法导入 auth 的“@firebase”模块。或者为什么那甚至在那里？我需要吗？为什么不将其全部封装到 'yarn add firebase' 模块中？

无论如何 - 这是我的建议。首先让它在顶层工作。然后稍后将凭据配置到单独的文件中。那和“不要喝啤酒。它会让你膨胀，而 IPA 是无限好。”???

【讨论】：

【解决方案17】：

我遇到了同样的问题，用这种方法解决了：

<script src = "https://www.gstatic.com/firebasejs/6.5.0/firebase-app.js"> </script>
<script src = "https://www.gstatic.com/firebasejs/6.5.0/firebase-auth.js"> </script>
<script>
// Firebase settings of your web application
var firebaseConfig = {
apiKey: "your apikey",
authDomain: "hackatonteleton.firebaseapp.com",
databaseURL: "https://name-database.firebaseio.com",
projectId: "name-projectid",
storageBucket: "name.appspot.com",
messagingSenderId: "730018138942",
Application ID: "1: 730018138942: web: eb12fac2f91fb17f"
};
// Initialize Firebase
firebase.initializeApp (firebaseConfig);
const auth = firebase.auth ();
</script>

您注意到的不同之处在于他们需要：

<script src = "https://www.gstatic.com/firebasejs/6.5.0/firebase-auth.js"> </script>

并初始化函数

const auth = firebase.auth ();`enter code here`

【讨论】：

【解决方案18】：

我尝试了这篇文章中的所有内容，但没有任何效果。

我发现我的导入和导出存在问题。这对我有用：

const auth = firebase.auth();
const database = firebase.firestore();

export { auth, database } 
import { auth, database} from '@/firebase.js';

这是我的错误：

export default { auth, database }
import auth from '@/firebase.js';

我的第一个错误：我使用两个值进行了导出默认值，但这不起作用。第二个错误，如果你用花括号导出，你需要用花括号导入。否则你会得到一个“无法读取未定义的属性'createUserWithEmailAndPassword'”

【讨论】：

【解决方案19】：

在 Firebase V9 的 JS SDK 中，感谢 Typescript，我所做的如下：

import { getAuth, signInWithEmailAndPassword } from "firebase/auth";

async login = (email: string, password: string) => {
  await signInWithEmailAndPassword(getAuth(), email, password)
}

【讨论】：

【解决方案20】：

使用 firebase v9，您不能再使用这样的身份验证。取而代之的是，您需要从“firebase/auth”导入身份验证，例如：

import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";

如果您需要导出身份验证对象

const auth = getAuth();
export { auth };

如果需要使用 createUserWithEmailAndPassword 函数

createUserWithEmailAndPassword(auth, email, password)

更多可以查看官方文档

https://www.npmjs.com/package/firebase

【讨论】：

【解决方案21】：

我的解决方案：完全移除 Node、NPM、NVM 并重新安装

这个问题过去在我身上发生过几次（每当我尝试更新或安装我的 node_modules 时）。我真的尝试了上面的一切。它似乎总是随机开始工作，下次发生错误时我无法使用任何以前记录的解决方案。

我认为自从我在早期开始使用 Firebase 以来，我可能遇到了一些遗留问题，当时我在 macOS 中进行了一些奇怪的 hack，以使 firebase 正常工作。

此解决方案基本上完全从您的 Mac 中删除任何 node / npm / nvm 痕迹，并重新安装它以使用 firebase 运行的确切版本的节点。这使用 nvm，因此如果您有其他需要不同节点版本的项目，您可以在节点版本之间动态切换。

1。删除现有节点模块

在您的项目文件夹中，删除您拥有的所有 node_modules 文件夹。

2。删除节点

This is the tutorial I used to manually remove node。在早期，我记得必须更改一些东西才能将 node 安装到不同的目录（由于权限问题），所以我还在我的计算机上进行了额外的搜索，以从其他区域删除这些文件和文件夹。

3。移除 NPM

This is the tutorial I used to make sure I removed traces of npm

4。移除 NVM

This is the tutorial I used to manually remove NVM

5。重启

删除所有内容并重新启动 bash（或像我为安全起见重新启动 Mac）后 - 在控制台中输入 node、npm 和 nvm 应该只返回 command not found。

6。仅使用 NVM 重新安装节点、NPM

NVM 允许您安装特定版本的节点。由于我使用的是 firebase-functions node 8 运行时（测试版），因此我安装了他们列出的节点 8 目标版本。（截至目前，node 8.11.1）。这仍处于测试阶段，截至撰写本文时，firebase 功能使用节点 6.11.5。

Instructions for installing node, npm using nvm

7.手动更新 NPM

NVM 安装了旧版本的 npm。此命令将 NPM 更新到其最新版本。

npm install npm@latest -g

8。安装你的模块

重启终端应用以防万一，然后返回项目文件夹并运行npm install 命令。

9。重新构建和重新部署

如果您使用的是 webpack，请重新构建您的项目。然后在本地部署或服务。

这个过程为我解决了这个问题。希望它对您有用，并且您不必做任何黑客行为。看来我需要做的只是清理一下。

【讨论】：

看来你在发脾气

【解决方案22】：

我不需要删除我的 node_modules 文件夹。只需确认您在 node_mudules 中是否同时拥有 '@firebase' 和 'firebase' 子文件夹。如果这样做，请将您的 require 语句中的路径更改为“firebase” './node_modules/firebase'

然后创建下一行；要求('./node_modules/firebase/firebase-auth');

【讨论】：

【解决方案23】：

这是一个奇怪的错误，我只在使用 npm 安装时才注意到它。出于某种原因，我在使用纱线时没有遇到这个问题。我不必像这里的许多答案所建议的那样更改导入，也不必更改我的代码的任何部分。

【讨论】：

【解决方案24】：

首先像这样导入 Firebase：

import * as firebase from 'firebase';

之后使用 firebase：

const uiConfig = {
  signInOptions: [
    firebase.default.auth.GoogleAuthProvider.PROVIDER_ID,
  ],
};

firebase 有默认属性使用。

【讨论】：

【解决方案25】：

上述“解决方案”都不起作用....花了很多时间，直到我决定安装一个旧版本来解决我的问题

yarn add firebase@^8.2.3

import firebase from 'firebase/app'
import 'firebase/firestore'
import 'firebase/auth'

【讨论】：

【解决方案26】：

对于使用版本 9 的用户

参考这个doc section

import { getAuth, GoogleAuthProvider } from "firebase/auth";

您应该使用getAuth以获得“auth”参考。

或

如果您不想更改代码，请尝试this answer

【讨论】：

【解决方案27】：

//如果你有firebase版本9，你可以通过这种方式导入firebase来解决它：

import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

//这适用于我的情况。有关更多详细信息，请访问上面的文档链接：

https://firebase.google.com/docs/web/modular-upgrade

【讨论】：