Stackblitz Error: Can't find package: firebase

Question

Installed firebase via command npm i firebase. Also tried npm i [email protected] (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.