追記:下記の質問ですが、状況が変わってしまいました。当初はFirebaseをV9方式に移行させる過程でトラブルが発生していると思い込んでおりましたが、検証したところ、無事にV9への移行は完了したようです。それで質問内容を変更させていただき、タイトルも変更しました。
私がNuxtを使用してごく小規模な開発を始めた頃、あまり理解していない中でネット記事を見ながらauth周りを実装していったので、理解が浅いままその後の開発が進んできている状態でした。
その中で昨年末に始まったV9対応の必要性を目にして、早速自分のプロジェクトもV9対応に着手し、まずは関連するすべての箇所にfirebase/compatを導入し、その後、コードをv9方式に書き換えました。
おかげでFirestore周りはV9対応が完了し、導入したfirebase/compatもほとんど削除でき、正常動作しています。
そして現在、firebase/compatが残っている最後の1箇所がFirebase初期化とauth周りです。firebase/compatを全て取り除きv9に完全対応させたいと思ったのですが、ここからうまく行きません。
V9完全移行は成功しました。ですがまだ疑問があります。
さて、私のコードなのですが、plugins/firebase.jsにfirebase初期化コードを書いています。
import { getApp, getApps, initializeApp } from 'firebase/app' const firebaseConfig = { apiKey: 'AI****************', authDomain: 'h************5.firebaseapp.com', databaseURL: 'https://h************5.firebaseio.com', projectId: 'h************5', storageBucket: 'h************5.appspot.com', messagingSenderId: '246************7', appId: '1:246************7:web:37c************3ee', } const firebase = !getApps().length ? initializeApp(firebaseConfig) : getApp() console.log('V9でのFIREBASE初期化') export default firebase
そしてstore/index.jsに下記のコードが書かれています。
import firebase from '~/plugins/firebase' const aa = firebase
なおstore内でaaは実際には使用していません。でもこのconst行を消すと、lint機能のせいでファイル保存時にimport firebase from '~/plugins/firebase'
が自動的に削除されて保存されてしまい、結果エラーが発生します。
それでこの行を残すためにわざわざ必要のないaaを定義して、firebaseを使っているように見せかけています。
そしてこのimport行が無い時に発生するエラー時にブラウザのconsoleに出てくるのは、
Uncaught FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).
というメッセージで、初期化がうまくいっていない旨だと理解しています。画面は真っ白でゆっくりローディング中の表示になります。
なぜimport firebase from '~/plugins/firebase'
の有無でエラーが発生するのかが今も分かりません。
当初はauth周りに問題があるかと思い、それに関連してauthも含めてV9へ移行する方法を質問していましたが、それが解決したことで質問内容が下記に変更になりました。
質問したいこと
・なぜstore/index.js内にfirebaseのimportの表記をしないとエラーが発生するのか
質問したいのは上記になります。
教えていただけたら大変ありがたいです。
あるいは関連する参考情報だけでも助かります。
それではどうぞよろしくお願いいたします。
環境
"nuxt": "^2.15.8",
"vuetify": "^2.5.5",
"firebase": "^9.6.1",
"firebase-tools": "^9.23.0",
Windows10上のWSL2のUbuntu20.04のDocker上のnode:16.13.0-alpineで実行
ホスティングはFirebase
追記:状況の変更により当初掲載していた下記の情報は不要になったかもしれません。
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
現在のauth周りは下記のウェブ記事とかなり似ている構成になっています。
Nuxt/VuexでFirebase Authenticationを使ってユーザー認証機能を作る
記事冒頭「pluginで初期化」の掲載コード最終行に、
plugins/firebase.js
export const auth = firebase.auth();
とあり、これをうけて記事の「Storeの作成」の掲載コード1行目が存在していると理解しています。
store/auth.js
import { auth } from '~/plugins/firebase'
そしてこのauthはactions内で、下記のように使用されています。
logout({ commit }) { auth.signOut().then(() => { commit("logout") }) }
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
状況の変更により当初掲載していた上記の情報は不要になったかもしれません。
あなたの回答
tips
プレビュー