react website not loading with firebase. What am I doing wrong?

I looked at the suggestions online for how to fix firebase, but they didn’t work. I tried setting my firebase.json hosting feature where says “public” to “build”, but that didn’t work so what else should I do? I don’t get errors when I compile it, but the website is blank when I run “npm start”. Here is the relevant javascript code:

import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

const firebaseApp = firebase.initializeApp({ 
    apiKey: "AIzaSyBl_kNHH8oIn17VrR2mcKQqOn3eAZo-Osw",
    authDomain: "instagram-clone-react-82ab7.firebaseapp.com",
    projectId: "instagram-clone-react-82ab7",
    storageBucket: "instagram-clone-react-82ab7.appspot.com",
    messagingSenderId: "562669348604",
    appId: "1:562669348604:web:ae6a7cee3832803e761979",
    measurementId: "G-6PENZ2M8LS"
});

const db = firebaseApp.firestore();
const auth = firebase.auth();
const storage = firebase.storage();

export { db, auth, storage };

export default db;

App.js file code:

import React, { useState, useEffect } from 'react';
import './App.css';
import Post from './Post';
import { db } from './firebase';

function App() {
  const [posts, setPosts] = useState([]);
  
  //useEffect: Runs a piece of code based on a specific condition

  useEffect(() => {
    //this is where the code runs
    db.collection('posts').onSnapshot(snapshot => {
      //Everytime a new post is added, this line of code activates
      setPosts(snapshot.docs.map(doc => doc.data()))
    })   //"posts" inside of firebase also everytime a document gets modified inside of post it takes a screenshot

  }, [] );   //conditions go here and there just variables 



  return (
    <div className="App">

      <div className="app__header">
        <img 
          className="app__headerImage"
          src="https://www.instagram.com/static/images/web/mobile_nav_type_logo.png/735145cfe0a4.png" 
          alt="instagram_text"
        />
      </div>

      <h1>Hello clever programmers let's build a react app!!!</h1>
      
      {
        posts.map(post => (
          <Post username={post.username} caption={post.caption} imageUrl={post.imageUrl} />
        ))
      }
    </div>
  );
}

export default App;

error in browser:

Answer

The issue is that you haven’t imported Firebase Storage.

To fix it, simply add the import statement after you import firebase/compat/app, like below.

import firebase from "firebase/compat/app";

// After you import app...
import "firebase/compat/storage";

Now, when you call the function below with .ref(), it should work correctly.

const storage = firebase.storage().ref();

Advertisement

Answer