'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?

Answer 1

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();