I'm trying to display the data from firestore. But I'm getting an error as following.

WEBPACK_IMPORTED_MODULE_1__firebase_init.a.collection is not a function" error_image

what I've done

First, I created init.js in order to initialize Firebase and begin using the SDKs in my webapp. I imported several modules but not sure if I neeed them for my todo-list app.

import * as firebase from "firebase/app";
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import { getfirestore, where, query } from 'firebase/firestore';
import { getFirestore, collection, getDocs } from 'firebase/firestore/lite';

const firebaseConfig = {
  apiKey: *****,
  authDomain: *****
  projectId: *****
  storageBucket: *****
  messagingSenderId: *****
  appId: *****,
  measurementId: *****
};



firebase.initializeApp(firebaseConfig);
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
// const db = getFirestore(app);

export default getFirestore(app);

Next, in my index.vue file, I imported db from init.js, which I created above. And I'm trying to console.log the data from firebase but it is not working..

import db from '@/firebase/init'
...
created(){
    db.collection('smoothies').get()
    .then(snapshot => {
      snapshot.forEach(doc => {
        console.log(doc)
      })
    })

CodePudding user response：

Try removing this line firebase.initializeApp(firebaseConfig);

You initialize firestore on the next line. const app = initializeApp(firebaseConfig);

You can find more instructions on how to initialize firestore here: https://www.npmjs.com/package/firebase

CodePudding user response：

The issue seems your import method which is import db from '@/firebase/init'

Try this by importing db as follows,

 import { db } from 'firebase/firestore';