'Uncaught TypeError: firebaseApp.firestore is not a function' when integrating Firebase to Vue.js 2

Question

I get this error when inspecting

Uncaught TypeError: firebaseApp.firestore is not a function.

Used dependencies:

"vuefire": "^3.0.0-alpha.2"

"firebase": "^9.0.2"

my db.js file:

import * as Firebase from "firebase/app";
import 'firebase/firestore';
import { initializeApp } from "firebase/app";

const firebaseApp = Firebase.initializeApp({
      apiKey: "x***************************",
      authDomain: "a**********.firebaseapp.com",
      projectId: "f****demo-****",
      storageBucket: "f**********.appspot.com",
      messagingSenderId: "2***********",
      appId: "1:**********:web:2**************"
});
export const db = initializeApp(firebaseApp.firestore());

How the error get solved?

samthecodingman · Accepted Answer · 2021-09-19 04:30:53Z

4

In v9 of the Firebase SDK the API surface changed to using modular, tree-shakeable code. Expect pretty much every piece of documentation or example code you see to have been written for v8 or older Firebase SDK versions that need updating.

Read more about migrating here.

For your specific case, you need to use the getFirestore() method, passing in the relevant FirebaseApp instance:

import { getFirestore } from "firebase/firestore";

export const db = getFirestore(firebaseApp);

Although, because this is the default unnamed instance, you can also just use:

import { getFirestore } from "firebase/firestore";

export const db = getFirestore();

answered Sep 19, 2021 at 4:30

samthecodingman

26.5k4 gold badges41 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ke_Sandaru Over a year ago

It is really good answer.It worked.Then I get Uncaught TypeError: Cannot read properties of undefined (reading 'collection').Should I initiate a document instance in db.js?

samthecodingman Over a year ago

To get a collection, you'll need to use import { collection } from "firebase/firestore"; and collection(db, 'collectionName'). The API reference and documentation cover the steps in more detail.

Collectives™ on Stack Overflow

'Uncaught TypeError: firebaseApp.firestore is not a function' when integrating Firebase to Vue.js 2

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related