見出し画像

Nuxt3でFirebase 9を導入したがリロードを行うとエラーが起きました。

Nuxt3がstableになったので早速触ってみました。まずはFirebaseを導入するところから始めましたが、結構序盤で躓きました。

Nuxt3の公式ページ

Firebase 9公式ドキュメント

参考にしたドキュメント

FirebaseとNuxtのバージョン

"firebase": "^9.16.0",
"firebase-admin": "^11.4.1",
"firebase-functions": "^4.1.1",
"firebase-functions-test": "^3.0.0",
"nuxt": "^3.1.1",

firebase.client.tsを追加してFirebase authとFirebase Firestoreにアクセスできる形になりましたが、リロードを行うと以下のようなエラーが発生し困っていました。

firebase: need to provide options, when not being deployed to hosting via source. (app/no-options)
firebase: need to provide options, when not being deployed to hosting via source. (app/no-options)

runtimeConfigを使用して環境変数にアクセスしてAPI情報を共有しているのですが、authとFirestoreと使用するページにてリロードをすると上記のエラーが出ました。

解決策

firebase.client.tsの.clientを除いたファイル名:firebase.tsにするとエラーが解消されました。他の記事や公式ドキュメントを見ても解決策がなかったので、今回はNoteにまとめてみました。
同じエラーが出ている人がいれば役に立てば幸いです。

この記事が気に入ったらサポートをしてみませんか?