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: firebase
en firebase/firestore
. Dat komt omdat de kernbibliotheek van firebase
de 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/firestore
niet 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.
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 /firebase
toegevoegd 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>
Antwoord 12
In mijn geval was het probleem dat ik per ongeluk firebase-admin
naast het pakket firebase
in mijn package.json
had toegevoegd. En firebase-admin
kreeg 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-admin
uit de client-app loste het probleem op.
Ter herinnering: firebase-admin
is 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):
- Verwijder
package-lock.json
bestand - Voer
npm install
uit 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_modules
samen met package-lock.json
en het uitvoeren van npm install
loste 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.json
in 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: false
doorgeven 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 Firestore
op 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-admin
op package.json
tot 5.4.1
of 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