firebase.firestore() is geen functie bij het initialiseren van Cloud Firestore

Toen ik Firebase Cloud Firestore probeerde te initialiseren, kwam ik de volgende fout tegen:

Uncaught TypeError: WEBPACK_IMPORTED_MODULE_0_firebase.firestore is geen functie

Ik heb eerder firebase geïnstalleerd met npm install firebase --save.

import * as firebase from 'firebase';
import router from '../router';
const config = {
        apiKey: "a",
        authDomain: "a",
        databaseURL: "a",
        projectId: "a",
        storageBucket: "a",
        messagingSenderId: "a"
};
if(!firebase.apps.length){
  firebase.initializeApp(config);
  let firestore = firebase.firestore();
}

Antwoord 1, autoriteit 100%

Ik heb het opgelost door meerdere bibliotheken te importeren: firebaseen firebase/firestore. Dat komt omdat de kernbibliotheek van firebasede firestore-bibliotheek niet bevat.

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

Antwoord 2, autoriteit 13%

Zorg er eerst voor dat je de nieuwste versie van firebase hebt:

npm install [email protected] --save

Voeg vervolgens zowel firebase als firestore toe:

const firebase = require("firebase");
// Required for side-effects
require("firebase/firestore");

Initialiseer de firebase-app:

firebase.initializeApp({
  apiKey: '### FIREBASE API KEY ###',
  authDomain: '### FIREBASE AUTH DOMAIN ###',
  projectId: '### CLOUD FIRESTORE PROJECT ID ###'
});
// Initialize Cloud Firestore through Firebase
var db = firebase.firestore();

bron: https://firebase.google.com/docs/firestore/ quickstart?autuser=0


Antwoord 3, autoriteit 10%

import { firebase } from '@firebase/app';
import '@firebase/firestore'

Als je ook authenticatie gebruikt

import '@firebase/auth';

Antwoord 4, autoriteit 5%

Ik hoop dat dit iemand helpt die met hetzelfde probleem wordt geconfronteerd bij het implementeren van een Angular-app in Firestore.

In het Angular 8-project had ik dezelfde fout bij het implementeren naar Firestore.
Ik heb het opgelost door een andere module toe te voegen AngularFirestoreModule.

App.module.ts is als volgt:

...
import { AngularFireModule } from '@angular/fire';
import { AngularFirestore, AngularFirestoreModule } from '@angular/fire/firestore'; // << Note AngularFirestoreModule !!!
import { AngularFireDatabaseModule } from '@angular/fire/database';
...
imports: [
    BrowserModule,
    FormsModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFirestoreModule,
    AngularFireDatabaseModule,
...

pakket.json:

...
"dependencies": {
    "@angular/animations": "~8.2.2",
    "@angular/common": "~8.2.2",
    "@angular/compiler": "~8.2.2",
    "@angular/core": "~8.2.2",
    "@angular/fire": "^5.2.1",
    "@angular/forms": "~8.2.2",
    "@angular/platform-browser": "~8.2.2",
    "@angular/platform-browser-dynamic": "~8.2.2",
    "@angular/router": "~8.2.2",
    "ajv": "^6.10.2",
    "bootstrap-scss": "^4.3.1",
    "core-js": "^2.5.4",
    "firebase": "^6.4.0",
...

UPDATE:
Toen ik het bij een andere hostingprovider implementeerde, hielp dit niet. Voor dit geval heb ik de originele firebase-bibliotheek toegevoegd en het werkte.

import { firestore } from 'firebase'; 

Antwoord 5, autoriteit 4%

U kunt een apart onderdeel maken voor het initialiseren van Firebase op uw applicatie met behulp van inloggegevens.

firebase-context.js

import * as firebase from 'firebase'
import 'firebase/firestore';
const firebaseConfig = {
            apiKey: "XXXX",
            authDomain: "XXXXX.firebaseapp.com",
            databaseURL: "https://XXXX-app-web.firebaseio.com",
            projectId: "XXXX",
            storageBucket: "XXXX-app-web.appspot.com",
            messagingSenderId: "XXXXXX",
            appId: "1:XXX:web:XXXX",
            measurementId: "G-XXXX"
        };
export default !firebase.apps.length 
  ? firebase.initializeApp(firebaseConfig).firestore()
  : firebase.app().firestore();

In het geval dat u te maken krijgt met databasebewerkingen, hoeft u niet elke keer de initialisatiemethode aan te roepen, u kunt de gemeenschappelijke componentmethode gebruiken die eerder is gemaakt.

import FirebaseContext from "./firebase-context";
export const getList = () => dispatch => {
    FirebaseContext.collection("Account")
        .get()
        .then(querySnapshot => {
            // success code
        }).catch(err => {
            // error code
        });
}

Antwoord 6, autoriteit 3%

Als uw code toevallig onder hekserij valt en import firebase/firestoreniet werkt, neem deze dan rechtstreeks op:

import '@firebase/firestore/dist/esm/index';

Als het er niet is, dan:

npm install @firebase/firestore

Antwoord 7, autoriteit 2%

Het probleem is niet de firestore te importeren

firebase heeft veel functies.

Je moet importeren of importeren vanuit het CDN wat je wilt implementeren uit de onderstaande lijst.

voer hier de afbeeldingsbeschrijving in
De officiële referentiezegt om firebase-firestore.js te laden.

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

als je npm wilt gebruiken, hier

npm install [email protected] --save

url is hier
https://firebase.google.com/docs/firestore/quickstart? authuser=0#set_up_your_development_environment


Antwoord 8

Ik had dezelfde fout en probeerde de officiële website te volgen, maar dat lukte niet.
Toen googlede ik fout en belandde in dit bericht.

Ik heb geprobeerd:

import * as firebase from 'firebase';
import 'firebase/firestore';

Het werkte echter niet voor mij, maar ik heb /firebasetoegevoegd aan de eerste regel import * as firebase from 'firebase/firebase';en alles werkt perfect .

Het werkt ook met require:

const firebase = require("firebase/firebase");
// Required for side-effects
require("firebase/firestore");

Antwoord 9

Als je een update uitvoert vanaf een eerdere versie van firebase en je trekt je haren uit over dit probleem, probeer dan
const Firebase = require('firebase/firebase')in plaats van require('firebase/app')


Antwoord 10

Als u versie 9 van firebase gebruikt, moet u deze in plaats daarvan gebruiken:

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

Hier is de link voor de upgrade van versie 8 naar versie 9 https:// firebase.google.com/docs/web/modular-upgrade


Antwoord 11

Als u firestore wilt gebruiken, moet u deze link bovenaan uw html-pagina toevoegen.

//After initializing firebase, in your main javascript page call...
var data = firebase.firestore();
<script src="https://www.gstatic.com/firebasejs/7.1.0/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.2.3/firebase-storage.js"></script>

Snippet uitvouwen


Antwoord 12

In mijn geval was het probleem dat ik per ongeluk firebase-adminnaast het pakket firebasein mijn package.jsonhad toegevoegd. En firebase-adminkreeg voorrang, dus zelfs na het toevoegen van de invoer volgens het geaccepteerde antwoord kreeg ik nog steeds dezelfde fout.

Het verwijderen van de overtollige firebase-adminuit de client-app loste het probleem op.

Ter herinnering: firebase-adminis bedoeld voor server-side om te werken in admin-modus, terwijl het firebase-pakket een client-side bibliotheek is.


Antwoord 13

Oplossing voor Angular 8 (vanaf 4 januari 2020):

  1. Verwijder package-lock.jsonbestand
  2. Voer npm installuit
  3. import AngularFirestoreModule from @angular/fire/firestore

Je hoeft alleen AngularFirestoreModule te importeren.

// App.module.ts
import { AngularFireModule } from '@angular/fire';
import { AngularFirestore, AngularFirestoreModule } from '@angular/fire/firestore';
import { AngularFireDatabaseModule } from '@angular/fire/database';
imports: [
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFirestoreModule,
    AngularFireDatabaseModule
]

Antwoord 14

I also struggled with this for a bit. what I did in the end was quite straightforward. 
for versions 9 and higher, just do the following
import firebase from 'firebase/compat/app';
import 'firebase/compat/firestore';
import 'firebase/compat/auth';
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: 
  authDomain: 
  projectId: 
  storageBucket: 
  messagingSenderId: 
  appId: 
};
// Initialize Firebase
const firebaseApp = firebase.initializeApp(firebaseConfig);
const db = firebaseApp.firestore;
const auth = firebaseApp.auth();
export { auth };
export default db; 
//cheers

Antwoord 15

Als je op mij lijkt en alles leuk vindt dat in typoscript wordt getypt (dat is trouwens het doel), kun je het volgende proberen:

import * as firebase from "nativescript-plugin-firebase";
import { User, firestore } from "nativescript-plugin-firebase";
import * as firebaseapp from "nativescript-plugin-firebase/app";

Dus je kunt dat soort dingen doen:

firebase.getCurrentUser().then((user: User) => { /* something */ });
const mycollection : firestore.CollectionReference = firebaseapp.firestore().collection("mycollection");

Antwoord 16

Verwijderen van de directory node_modulessamen met package-lock.jsonen het uitvoeren van npm installloste het voor mij op.

https://github.com/angular/angularfire2/issues/1880


Antwoord 17

Ik had hetzelfde probleem, het was een bug. Ik was firestore aan het importeren van firebase (het werd automatisch gedaan door de IDE…) toen ik het moest importeren uit het .js-bestand waar ik de firebase-app had geïnitialiseerd.


Antwoord 18

Ik gebruik de nieuwste versie van Angular 8.2.14, toen ik het in productie zette, veroorzaakte dit dit probleem, dus ik voeg het volgende toe aan app.module.ts

       imports: [
        ...,
        AngularFireModule.initializeApp(environment.firebaseConfig),
        AngularFirestoreModule,
        AngularFireDatabaseModule,
...
      ],
      providers: [AngularFirestore, AngularFirestoreModule],

Antwoord 19

Ik vond een nuttige opmerking in Githubvan alclimb

hij zei dat firebase-analyse niet werkt in Node.js, omdat het bedoeld was om met een browser te worden gebruikt (dit wordt vermeld in de officiële documentatie)


Antwoord 20

Firestore inschakelen voor Nativescript

Tijdens de installatie van de plug-in wordt u gevraagd of u Firestore al dan niet gebruikt.

Als je een upgrade uitvoert en je hebt het bestand firebase.nativescript.jsonin de hoofdmap van je project, bewerk het dan en voeg toe: "firestore": true. Voer vervolgens rm -rf platforms && rm -rf node_modules && npm i.

init / initializeApp

Standaard bewaart Firestore op iOS en Android gegevens lokaal voor offline gebruik (web standaard niet, en de normale Firebase DB ook niet op elk platform). Als je die geweldige functie niet leuk vindt, kun je persist: falsedoorgeven aan de init-functie.

Houd er rekening mee dat initializeApp gewoon een alias is voor init om de plug-in compatibel te maken met de web-API.

const firebase = require("nativescript-plugin-firebase/app");
firebase.initializeApp({
  persist: false
});

verzameling

Een ‘verzameling’ vormt de basis van elke Firestore-interactie. Gegevens worden opgeslagen als een ‘document’ in een verzameling.

const citiesCollection = firebase.firestore().collection("cities");

Bron: nativescript-plugin-firebase


Antwoord 21

In vanilla javascript op de client moet je dit script opnemen om het te laten werken:

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

Omdat het niet is opgenomen in het standaardfragment, vraagt ​​Google u om te kopiëren en plakken in uw website.

Bron: https://firebase.google.com/docs/firestore /quickstart?autuser=0


Antwoord 22

Controleer voor 2022-lezers uw firebase-versie.

De nieuwste versie is nu 9.x. Het is een beetje anders dan de meeste YouTube-gidsen.

Je hebt [email protected]nodig om de YouTube-handleidingen te volgen.

npm uninstall firebase

npm install [email protected]

Documenten: https://firebase.google .com/docs/firestore/quickstart?authuser=0#web-version-9_1


Antwoord 23

importeer { getFirestore } van “firebase/firestore”;

Probeer dit eens en kijk hoe het gaat


Antwoord 24

Ik denk dat ik het heb voor mensen die elektronen-webpack gebruiken. Oplossing was van een bericht met betrekking tot het importeren van codemirror. https://github.com/electron-userland/electron-webpack/issues/ 81

Dit werkte voor mij.

// package.json
{
  //...
  "electronWebpack": {
    "whiteListedModules": [
      "firebase"
    ]   
  },
  //...
}

Antwoord 25

In mijn geval was de fout omdat ik probeerde een bestand te importeren dat firebase.firestore() gebruikte voordat ik “firebase/firestore” daadwerkelijk importeerde


Antwoord 26

Om de cloudfuncties van Firestoreop Node.js te gebruiken, moet je admin.firestore()gebruiken in plaats van admin.database(). U moet er ook zeker van zijn dat uw module firebase-adminop package.jsontot 5.4.1of hoger is. Ziet eruit als iets als:

{
  "name": "functions",
  "description": "Cloud Functions for Firebase",
  "dependencies": {   
    "firebase-admin": "^5.4.1",
    "firebase-functions": "^0.7.0"
  }
}

Antwoord 27

het antwoord is simpelweg om deze scripts in uw html-bestand te linken en te controleren of het probleem is opgelost

script src=”https://www.gstatic.com/firebasejs/8.6.1/firebase-auth.js”

script src=”https://www.gstatic.com/firebasejs/8.6.1/firebase-firestore.js

geeft upvote als het nuttig is om uw probleem op te lossen

Other episodes