Skip to content

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: "",
    projectId: "instagram-clone-react-82ab7",
    storageBucket: "",
    messagingSenderId: "562669348604",
    appId: "1:562669348604:web:ae6a7cee3832803e761979",
    measurementId: "G-6PENZ2M8LS"

const db = firebaseApp.firestore();
const auth = firebase.auth();
const 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( =>
    })   //"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">

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

export default App;

error in browser: enter image description here


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 =;