Stackblitz Error: Can't find package: firebase - reactjs

Question

Installed firebase via command npm i firebase. Also tried npm i firebase#8.1.1 (Nov2020 version in which the tutorial has used firebase) and npm i firebase --save to no avail.
Here is my Stackblitz project link for your reference.
S.O.S.

Answer 1

Please have a look at the documentation: https://firebase.google.com/docs/web/setup
Your firebase.js should look like this
import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore/lite';
const firebaseConfig = {
apiKey: 'AIzaSyCUCwjxhnH-D99j1dKmI-tyL3Q057FI1WA',
authDomain: 'cp-react-robinhood.firebaseapp.com',
projectId: 'cp-react-robinhood',
storageBucket: 'cp-react-robinhood.appspot.com',
messagingSenderId: '112144437320',
appId: '1:112144437320:web:bf5dd8d3a3f0d83bc6c87d',
measurementId: 'G-NLE375QG7B',
};
const firebaseApp = initializeApp(firebaseConfig);
const db = getFirestore(firebaseApp);
export { db };
Your Stats.js should start like this:
import React, { useState, useEffect } from 'react';
import './Stats.css';
import axios from 'axios';
import StatsRow from './StatsRow';
import { db } from './firebase';
import { collection, getDocs } from 'firebase/firestore/lite';
// f u
function Stats() {
const TOKEN = 'bvkgi0v48v6vtohioj2g';
const BASE_URL = 'https://finnhub.io/api/v1/quote';
const [stockData, setstockData] = useState([]);
const [myStocks, setmyStocks] = useState([]);
const getMyStocks = () => {
const myStocksCollection = collection(db, 'cities');
getDocs(myStocksCollection).then((snapshot) => {
let promises = [];
let tempData = [];
snapshot.docs.map((doc) => {
console.log(snapshot.docs);
promises.push(
getStocksData(doc.data().ticker).then((res) => {
tempData.push({ id: doc.id, data: doc.data(), info: res.data });
})
);
});
});
};
You just imported firebase the wrong way. You have to import each module which you will need for you purpose.