firebase.auth n'est pas une fonction

Question

J'utilise Webpack avec firebase et firebase-admin.

Pour installer firebase, j'ai exécuté

npm install --save firebase

Je suis en train d'importer firebase en utilisant,

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

J'ai aussi essayé

import * as firebase from 'firebase'

Et j'ai essayé

const firebase = require('firebase')

Comme suggéré dans Guide de démarrage en ligne

Lorsque j'essaie d'utiliser firebase.auth() Cependant, je reçois une erreur

console.js:32 TypeError : firebase.auth n'est pas une fonction

Lorsque j'utilise le débogueur pour inspecter firebase Je vois qu'en fait il n'a pas de auth fonction :

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

Comment puis-je obtenir auth() inclus comme une fonction en utilisant webpack ?

Merci.

Answer 1

Ok, j'ai réparé ça en supprimant mon node_modules et de tout réinstaller.

J'importe aussi Firebase comme ça :

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

Je ne sais pas.

¯\_()_/¯

Answer 2

Je sais que vous avez résolu votre problème mais il n'y a pas de véritable réponse au problème original. Le problème n'était pas avec le node_modules c'était avec la façon dont vous avez importé le composant.

Lorsque vous exportez un composant de la manière ES6, vous le faites normalement export default () => { console.log('default component export'); };

default est le mot clé ici, lorsque vous importez un composant à la manière ES6 comme import firebase from 'firebase' c'est saisir le default de l'objet exporté.

En gardant à l'esprit l'exemple ci-dessus, voici ce que vous avez fait de mal.

Utilisation de l'ES6 :

import * as firebase from 'firebase'

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

Utilisation de l'ES5 :

var firebase = require('firebase')

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

Notez le .default

J'espère que cela aidera à expliquer ce qui n'allait pas en premier lieu.

Answer 3

Je continue à avoir une erreur qui dit

"TypeError : firebase.auth n'est pas une fonction"

J'ai réussi à faire apparaître l'objet auth et la chose que j'ai faite différemment est d'installer les modules dans un ordre différent.

La première fois que j'ai installé les modules (c'est quand l'objet auth n'apparaissait pas) :

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

J'ai supprimé le dossier npm et j'ai recommencé à zéro, mais cette fois, j'ai inversé l'ordre d'installation :

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

Je n'ai rien fait d'autre. J'ai simplement inversé l'ordre d'installation en installant firebase en premier et firebase-admin en second.

J'espère que cela fonctionnera pour d'autres personnes.

Vous pouvez en savoir plus à ce sujet ici

Answer 4

Il suffit d'ajouter >

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

dans votre projet

Answer 5

Bien qu'il existe de nombreuses causes profondes à l'origine de ce problème, une simple cause comme celle-ci pourrait également être en cause.

J'ai oublié d'inclure les fichiers js pour auth et db bien que je les utilise dans le code JS.

Avant la réparation ;

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

Après la réparation ;

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