How to get TypeScript to recognize firebase import

Question

I am trying to show content from firestore in a small TypeScript web application by accessing firestore client-side. However, tsc is failing to compile as it cannot find the firebase module.

In the head of my index.html, I have imported the firebase-app.js from gstatic, firebase-firestore.js from gstatic, as well as my compiled script.js in that order. I currently have 3 TypeScript files compiling to the single js file and I am trying to load the data in the first of three files.

My index.html imports the three scripts in the head here

    <script src="https://www.gstatic.com/firebasejs/6.1.1/firebase-app.js"></script>

    <script src="https://www.gstatic.com/firebasejs/6.1.1/firebase-firestore.js"></script>

    <script src="scripts/script.js" type="module"></script>

Then my tsconfig.json compiles the three files using these options

{
    "compilerOptions": {
        "target": "esnext",
        "watch": true,
        "outFile": "public/scripts/script.js",
        "module": "system"
    },
    "files": [  
                "scripts/temp.ts",
                "scripts/loaddata.ts",
                "scripts/control.ts"
            ]
}

Finally, the first line of temp.ts is where the error occurs when I do my imports

import * as firebase from 'firebase/app';
import 'firebase/firestore';

const firebaseConfig = {
//config here
}

firebase.initializeApp(firebaseConfig);

let db = firebase.firestore();

VS Code is giving me the syntax error Cannot find module 'firebase/app' and thus fails to compile. I have tried several different combinations of firebase and app and have been unsuccessful in importing the module. Is it possible to compile multiple TypeScript files into a single javascript file while using firebase/firestore? I was successfully able to retrieve my data using raw JavaScript but I would prefer to use TypeScript as that is what the rest of my project is written in!

Answer 1

    import firebase from '@firebase/app'
    import '@firebase/auth'

    firebase.auth().createUserWithEmailAndPassword(email, passowrd)

Answer 2

Initialize Firebase in your app and create a Firebase App object:

import { initializeApp } from 'firebase/app';
import { getFirestore, collection, getDocs } from 'firebase/firestore/lite';
    
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

// Get a list of cities from your database
async function getCities(db) {
  const citiesCol = collection(db, 'cities');
  const citySnapshot = await getDocs(citiesCol);
  const cityList = citySnapshot.docs.map(doc => doc.data());
  return cityList;
}

Or use this:

// version 9 provides a set of compat packages that are API compatible with Version 8
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

Answer 3

I Use this Initialize Firebase and it worked

import firebase from 'firebase/compat/app'

const firebaseConfig = {
//config here
}

firebase.initializeApp(firebaseConfig);
export default firebase