Uncaught TypeError: firebase.storage is not a function (In new version)-CodePudding

There is similar questions in stackoverflow but none of that fixed my issues... Maybe because that questions are old and the solutions for older versions.... So I tried different methods I saw but none of it helped still showing the same error.. please help me fix it friends...

Create.js file:

    import { FirebaseContext, AuthContext } from '../../store/Context';    
    const { firebase } = useContext(FirebaseContext);
    const handleSubmit = () => {
        firebase.storage().ref(`/image/${image.name}`).put(image).on('state_changed').then(({ ref }) => {
          ref.getDownloadURL().then((url) => {
            console.log(url);
          })
        })
      }
      return (
    <Fragment>
    <button className="uploadBtn" onClick={handleSubmit}>Upload and Submit</button>
    <Fragment/>
    )

I have added only the necessary parts here. The firebase config file has the following imports:

import 'firebase/compat/auth';
import 'firebase/compat/firestore';
import 'firebase/storage'

I am doing my project in React.

CodePudding user response：

You're importing the compat paths of auth and firestore, which means you can use the namespaced syntax when using those products. But for storage you're importing the default path, meaning you must use the new modular syntax of the SDK version you use.

To be able to use the namespaced syntax for storage too:

import 'firebase/compat/storage'

CodePudding user response：

For Uploading image to firebase storage and get the url for the uploaded image, You can use this:

import { getStorage, ref, uploadBytes,getDownloadURL } from "firebase/storage";

const Create = () => {

 const handleSubmit = () => {
    const storage = getStorage();
    const storageRef = ref(storage, `/image/${image.name}`);
    //uploads the file to firebase storage
    uploadBytes(storageRef, image).then((snapshot) => {
      console.log('Uploaded a blob or file!');
    }
    ).then(() => {
      //gets the url for the uploaded image
      getDownloadURL(ref(storage, `/image/${image.name}`)).then((url) => {
        console.log('url is: '   url);
      })
    })
  }

  return (
    <Fragment>
      <div>
        <button className="uploadBtn" onClick={handleSubmit}>Upload</button>
       </div>
    </Fragment>
)
}