CODEWITHSUNDEEP
firebasenext.js
biscarrosse
biscarrosse

Reputation: 121

Fetching firebase storage file URL in Next.js app returns XMLHttpRequest ReferenceError

I have setup Next.js (11) app with working connection to the firebase version 8.7. I got an issue on getting donwload URL for image:

If I'd create a function (example below) to fetch the uploaded image - assume it is there & I know its name and location. It will work only once (dev env)

After any route change or page refresh (not on code change assuming I do not change the route or refresh the page), the app crashes with terminal error:

ReferenceError: XMLHttpRequest is not defined

I get this error when I call both in getStaticProps or in the component itself on the client side

function example:

import firebase from "firebase/app";
import "firebase/storage";

export const getImgUrl = async () => {
  const storage = firebase.storage();
  const pathReference = storage.ref("user_uploads/my_image.jpg");

  pathReference
    .getDownloadURL()
    .then((url) => {
      console.log("my url", url);
    })
    .catch((error) => {
      console.error("error", error);
    }); 
};

Upvotes: 0

Views: 936

Answers (1)

biscarrosse
biscarrosse

Reputation: 121

I have a bypass solution:

Upgrade to the firebase sdk version 9 (modular one).

Create db & storage:

const initFirebase = () => {
    const db = getFirestore(firebaseApp)
    const storage = getStorage(firebaseApp)

    console.log('Firebase was successfully initialized')

    return [db, storage]
}

// Init firebase:
export const [db, storage] = initFirebase()

use it:

const getData = async () => {
    console.log('getData runs')

    try {
        const url = await getDownloadURL(ref(storage, 'landing/land.jpg'))
        console.log('getData url:', url)
        return url
    } catch (error) {
        // Handle any errors
    }
}

and call getData in getServerSideProps or getStaticProps in any component

Upvotes: 0

Related Questions