Service Firestore is not available or No Firebase App with getFirestore

I have tried a few ways to get Firestore working in my JavaScript Module file.

When I do this:

import {initializeApp} from "https://www.gstatic.com/firebasejs/10.11.1/firebase-app.js";
import {getStorage, ref, uploadBytes, getDownloadURL} from "https://www.gstatic.com/firebasejs/10.11.1/firebase-storage.js";
import { getFirestore } from 'https://www.gstatic.com/firebasejs/11.1.0/firebase-firestore.js'


var firebaseConfig = {
    apiKey: "",
    authDomain: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: ""
};


const app = initializeApp(firebaseConfig);
const storage = getStorage(app);
const db = getFirestore();

I get the following error on the getFirestore() method.

Uncaught FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call initializeApp() first (app/no-app).

When I try this const db = getFirestore(app) instead, I get the following error.

Service firestore is not available

How do I get Firestore implemented on my web app? I'm not using Firebase functions.

The versions of your SDK imports don't match. Here they are in alignment so you can more easily see how the versions don't match:

https://www.gstatic.com/firebasejs/10.11.1/firebase-app.js
https://www.gstatic.com/firebasejs/10.11.1/firebase-storage.js
https://www.gstatic.com/firebasejs/11.1.0/firebase-firestore.js

11.1.0 !== 10.11.1

You should always start by using the latest version of the SDK as shown in the documentation, and make sure they always match for all your imports:

Do you use ESM and want to use browser modules? Replace all your import lines to use the following pattern: import { } from 'https://www.gstatic.com/firebasejs/11.1.0/firebase-SERVICE.js' (where SERVICE is an SDK name such as firebase-firestore).

Using browser modules is a quick way to get started, but we recommend using a module bundler for production.