Error when uploading image to firebase using react js

Question

I am having issues uploading my picture to firebase, the problem seems to stem from [ firebase storage ] i've tried multiple iterations of it and still no luck.

in the console, i saw this error:

FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).

This error also appears when i remove the comment to import storage from firebase.

TypeError: firebase_compat_app__WEBPACK_IMPORTED_MODULE_1__.default.storage is not a function at Module../src/features/userprofile/firebase.js 19 it points to this line in my firebase.js file ->

   const storage = firebase.storage();

---

   import React, { useState, useEffect } from "react";
import { Paper } from "@mui/material";
//import axios from "axios";
import authHeader from "../../features/authentication/AuthHeader";
//import {storage} from "./firebase.js";
import {getStorage,ref,uploadBytes} from 'firebase/storage';

function UserProfile() {
  const [user, setUser] = useState({});

  async function fetchUser() {
    const response = await fetch("http://localhost:9005/getProfile", {
      headers: authHeader(),
    });
    const fetchedUser = await response.json();
    console.log(fetchedUser);
    setUser(fetchedUser);
  }

  useEffect(() => {
    fetchUser();
  }, []);

  //firebase upload
  const allInputs = { imgUrl: "" };
  const [imageAsFile, setImageAsFile] = useState("");
  const [imageAsUrl, SetImageAsUrl] = useState(allInputs);

  const handleImageAsFile = (e) => {
    const image = e.target.files[0];
    setImageAsFile((imageFile) => image);
  };

  const handleFireBaseUpload = e =>{
    e.preventDefault();
    console.log('uploading pic');
    if(imageAsFile===''){
      alert(`image format not supported${typeof(imageAsFile)}`);
    }

    const storage = getStorage();
    const storageRef = ref(storage,'tet');

    uploadBytes(storageRef,imageAsFile).then((snapshot)=>{
      alert('uploading');
    });
    //const uploadTask = storage.ref(`/images/${imageAsFile.name}`).put(imageAsFile);
  }
 

  return (
    <>
      

      <Paper
      
        elevation={6}
        style={{ margin: "10px", padding: "15px", textAlign: "left" }}
        key={user.user_id}
      >
      <div className="pfp">
          <form onSubmit={handleFireBaseUpload}>
            <input type="file" onChange={handleImageAsFile} />
            <p>hgk</p>
            <button>test</button>
          </form>
        </div>
        First Name: {user.firstName}
        <br />
        Last Name: {user.lastName}
        <br />
        Email: {user.email}
        <br />
        Phone: {user.phone}
      </Paper>
    </>
  );
}
export { UserProfile as default };

this is the firebase js

import {initializeApp} from "firebase/app";
import firebase from "firebase/compat/app"
import "firebase/storage" ;




const firebaseConfig = {
    apiKey: "this-key",
    authDomain: "this-domain",
    projectId: "this-project",
    storageBucket: "this-bucket",
    messagingSenderId: "this sender",
    appId: "this-id"
  };
  //initilize firebase
  firebase.initializeApp(firebaseConfig);

  const storage = firebase.storage();

  export{
    storage, firebase as default
  }

Answer 1

You don't seem to be importing from your firebase.js, since you commented out:

//import {storage} from "./firebase.js"`

Since you don't import firebase.js, the initializeApp call that is in there is not executed, and you have to call initializeApp before calling any other Firebase functions.