広告

Flutterラボの

プレミアム会員になる

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

2023.02.18

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

Nuxt3の公式ページ

Nuxt: The Intuitive Web Framework Build your next Vue.js application with confidence using Nuxt nuxt.com

Firebase 9公式ドキュメント

バージョン8からモジュラーWebSDKにアップグレードします  |  Firebase firebase.google.com

参考にしたドキュメント

Nuxt3でFirebase Auth v9を使ってみる - くらげになりたい。 Nuxt3&Firebase Auth v9を試してみたときの備忘録。 Nuxt2&Firebase Au www.memory-lovers.blog
Nuxt3 & Firebase9でFirebase Authentication決定版 zenn.dev

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にまとめてみました。
同じエラーが出ている人がいれば役に立てば幸いです。

Flutterラボ
hatchoutschool
FlutterとNuxtに関する知識を発信しています! 動画で学べる学習サイト『Flutterラボ』と『Nuxtラボ』を運営 Flutterラボ:https://flutterlabo.tech/ 広告のECサイトを開発(https://ec-ad.tech/)