我的解决方案：完全删除节点，NPM，NVM并重新安装

Question

我正在使用带有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不是函数

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

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

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

感谢。

编辑：这不是评论中问题的副本。该问题指的是作为auth服务成员的方法，而不是auth服务本身。

Answer 1

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

我也是这样导入firebase：

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

我不知道。

¯\_(ツ)_/¯

Answer 2

我不断收到错误消息

＆＃34; TypeError：firebase.auth不是函数＆＃34;

我得到了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 second来反转安装顺序。

我希望这适用于其他人。

You can read more about it here

Answer 3

我知道你已经解决了你的问题但是对原始问题没有真正的答案。问题不在于export default () => { console.log('default component export'); };，而在于您导入组件的方式。

当您导出组件ES6时，通常会执行default

import firebase from 'firebase'是此处的关键字，当您从default导入组件ES6时，它会从导出的对象中抓取import * as firebase from 'firebase' console.log(firebase.auth) // Undefined console.log(firebase.default.auth) // Function属性。

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

使用ES6：

var firebase = require('firebase')

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

使用ES5：

.default

请注意P��

希望这有助于解释首先出现的问题。

Answer 4

这是因为未添加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>

应在工作之初

Answer 5

只需添加>

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

进入您的项目

Answer 6

您只需要按以下方式使用导入

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

在上述情况下，同时使用了身份验证和数据库服务。对于其他任何服务，您只需要那样导入即可。

Answer 7

我也碰到了这个。我的问题是安装了npm模块@firebase以及firebase模块。当我在我的JavaScript代码中使用'require（“firebase”）'需要firebase时，webpack捆绑@firebase而不是出于某种原因。

@ firebase默认情况下不包括auth，数据库等......它是模块化的，所以你可以单独要求它们。因此，当我尝试调用auth（）时，我收到了上述错误。

要解决此问题，您可以删除@firebase ...或者只需在需要时添加正确的firebase的完整路径

要求（“/路径/到/ node_modules /火力/ firebase.js”）

Answer 8

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

Answer 9

这是来自官方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);

如果您只想要auth，这些似乎也可以工作：

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

或

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

Answer 10

尽管此问题背后有许多根本原因，但也可能是这种情况。

尽管我在JS代码中使用了它们，但我忘记包括auth和db的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>

Answer 11

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

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();

再次检查。

Answer 12

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()

Answer 13

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

我发现了进出口问题。这对我有用：

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'”

Answer 14

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

思路：Firebase有很多值得一去的地方。但是导入，导出，命名为vs default和版本控制似乎给很多人带来了很多不必要的麻烦。 <-我说的是，泪水从我的脸上流下，在我的心中留下了一个洞，在那里，对移动开发的热爱和不快乐的童年曾经在几小时前就存在过。

简单地输入：我有firebase.auth is not a function。尝试通过node_modules进行搜索，删除，重新纱线，阅读博客，尝试以已命名的方式导入，然后默认导入，在firebase本身的默认导入下需要单独的模块a-la require('firebase/auth');，等等，等等（实际上不应该）很难）。另外，为什么Google没有反应文档？现在是2018年。人们是否仍然认真地将HTML脚本标签放置在前端？

当前解决方案=>最后，我将所有配置和firebase.initializeApp(config)拉到了顶层app.js中。稍后，我将不得不花点时间弄清楚为什么无法导入auth的“ @firebase”模块。或为什么多数民众赞成在那里？我需要吗？为什么不将它们全部包装到“ yarn add firebase”模块中？

无论如何-这是我的建议。首先让它在顶级上运行。然后将凭证拆分为单独的文件。那和“不要喝啤酒。它会使您膨胀，并且IPA会变得更好。”

Answer 15

我遇到了同样的问题。但是，我不必删除任何文件，只需更正导入语句即可。就我而言，我在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
};

Answer 16

我遇到了同样的问题，并以此方式解决了该问题：

<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`

Answer 17

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

Answer 18

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

然后进行下一行； require（'./ node_modules / firebase / firebase-auth'）;

Answer 19

在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()

Answer 20

我的解决方案：完全删除节点，NPM，NVM并重新安装

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

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

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

1。删除现有的节点模块

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

2。删除节点

This is the tutorial I used to manually remove 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只需返回{{1} }。

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

NVM允许您安装特定版本的节点。由于我正在使用firebase函数的节点8 运行时（测试版），因此我安装了列出的节点8的目标版本。（到目前为止，node 8.11.1）。该版本仍处于测试阶段，截至撰写本文时，firebase函数使用节点6.11.5。

Instructions for installing node, npm using nvm

7。手动更新NPM

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

command not found

8。安装模块

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

9。重新构建和重新部署

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

此过程为我解决了问题。希望它对您有用，并且您不必做任何改动。看来我要做的只是清理一下。

Answer 21

首先像这样导入 Firebase：

import * as firebase from 'firebase';

之后使用firebase：

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

firebase 有默认属性使用。

firebase.auth不是函数

21 个答案:

我的解决方案：完全删除节点，NPM，NVM并重新安装

1。删除现有的节点模块

2。删除节点

3。删除NPM

4。删除NVM

5。重新启动

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

7。手动更新NPM

8。安装模块

9。重新构建和重新部署