Vue 2 and Firebase 9 - "export 'getFirestore' was not found in 'firebase/firesto-CodePudding

I am trying to instantiate firebase and grab some docs from a collection on firestore. I can't seem to get my app to instantiate firebase / connect to firestore. I've read through the documentation of V9 of firebase and this should be the correct way to do it? Any help would be very much appreciated! I get the error "export 'getFirestore' was not found in 'firebase/firestore'" and an analagous error for every other function I try and import such as getDocs etc.
db.js

import {
    initializeApp
} from 'firebase/app';

import {
    getFirestore
} from 'firebase/firestore';

// Your web app's Firebase configuration
const firebaseConfig = {
  etc...
};

// Initialize firebase and then firestore of that instance
export const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);

App.vue

<template>
  <v-app>
    <v-app-bar
      app
      color="primary"
      dark
    >
      <h1 app color="accent" light>Hans Lite</h1>
    </v-app-bar>
    <v-main>
      <addFormula /> 
    </v-main>
  </v-app>
</template>

<script>
import addFormula from './components/addFormula.vue'
export default {
  name: 'App',

  components: { 
    addFormula
  },

  data: () => ({
    //
  }),
};
</script>

<style scoped>
h1 {
  font-family: 'Roboto Mono', monospace;
  font: bold;
}
</style>

addFormula.vue

<template>
    <v-container fluid>
            <v-col cols="12" md="3">
                <v-card outlined>
                    <v-card-title class="font-weight-bold">Add Formulas</v-card-title>
                    <v-select elevation="2"
                        class="ma-4" 
                        :items="items"
                        label="Select Package"
                        @change="selectPackage"></v-select>
                </v-card>
            </v-col>
    </v-container>
</template>

<script>
import { db } from "../firebase/db"
import { collection, getDocs } from "firebase/firestore"
export default {
    data: () => ({
        items: ['chicken', 'beef'],
        package: null
    }),
    methods: {
        async selectPackage(e) {
            console.log("label: " e)
            this.package = e
            const querySnapshot = await getDocs(collection(db, this.package))
            var allDocs = [];
            querySnapshot.forEach(doc => {
                allDocs.push(doc.data())
            })
            console.log(allDocs)
        }
    }
}
</script>

<style scoped>
h1 {
    /* border: solid; */
}
</style>

CodePudding user response：

Please check The available Firebase Version on NPMJS.

The Version you have mentioned does not exist or valid. In firebase release notes and library versions list.