Firebase Storage XMLHttpRequest is not defined error with Nuxt JS

Question

I am in need of help with my web app that is uploading an image to firebase storage then wanting to display that image in a thumbnail.

I am getting the error this.xhr_ = new XMLHTTPREQUEST is not defined

I don't have 10 rep points so it seems I can't upload my image directly. If there was a better way to do this please let me know.

I have looked through firebase docs and many stack overflow answers but can seem to have anything that works. I have tried to globally install xmlhttprequest, also as a dependency.

As you can see I also attempted to import XmlHttpRequest but it did nothing.

The error I am getting comes from the last statement with getdownloadurl()

<script>
import XMLHTTPREQUEST from 'xmlhttprequest'
import ImageCard from '../../components/ImageCard/ImageCard'
import {db} from '../../firebase/init.js'
import {storage} from '../../firebase/init.js'
export default {
    name: "explore",
    components: {
        ImageCard,
        db,
        storage,
        XMLHTTPREQUEST
    },
    data() {
        return {
            cards: [],
            downloadUrl: ''
        }
    }, 
    created(){
        //fetch data from firestore
        db.collection('Assets').get()
        .then(snapshot => {
            snapshot.forEach( doc => {
                let card = doc.data()
                console.log(card)
                // the card.id is adding an id property onto the let card variable
                card.id = doc.id
                this.cards.push(card)
                console.log(this.cards)
            })
        })

    },
    created() {  
      const storageRef = storage.ref()
      const imagesRef = storageRef.child('AshAngelPaid.jpg');
        console.log('Before getting requesting download url')
      imagesRef.getDownloadURL().then( (url) => {

            document.querySelector('img').src = url;
          console.log('got download url');

Answer 1

Basically, while nuxtjs is rendering your component on the server side there's no xmlhttprequest, just move .getDownloadURL and related stuff into mounted() or beforeMount() lifecycle hook.