firebaseのstorageでXMLHttpRequestエラーの対処法(ReferenceError: XMLHttpRequest is not defined)

はじめに

firebaseのCloudStorageをNextで使おうとしたら次のようなエラーが起きた。

C:\XXXXXXXXXXXXXX\node_modules\@firebase\storage\dist\index.cjs.js:611
        this.xhr_ = new XMLHttpRequest();
                        ^

ReferenceError: XMLHttpRequest is not defined

原因

どうやらXMLHttpRequestはブラウザ用のAPIらしく、要はクライアントサイドでしか呼び出せないみたい。

対処法

Next.jsであれば、getInitialProps()内でstorageを呼び出すのではなく、useEffect()等を使ってクライアントサイドで呼び出す。

Node.jsには代替としてHttp APIがあるみたい(確かめていません)
詳しくはこちらの記事を参考にしてください。
Qiita - Node.jsでFetch APIを使うと XMLHttpRequest is not defined になる @IzumiSy

参考

• Qiita - Node.jsでFetch APIを使うと XMLHttpRequest is not defined になる @IzumiSy
• stackoverflow - Loading an image with getDownloadURL() from firebase storage do not work