質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Firebase Authentication

Firebase Authenticationは、Firebaseを利用したユーザーの認証機能です。バックエンドサービス、SDK、アプリでのユーザー認証に使用できるUIライブラリが用意されています。

Q&A

0回答

1136閲覧

Nuxt2とFirebaseでstore/index.jsにfirebaseをimportする理由について

jzx100ts

総合スコア28

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Firebase Authentication

Firebase Authenticationは、Firebaseを利用したユーザーの認証機能です。バックエンドサービス、SDK、アプリでのユーザー認証に使用できるUIライブラリが用意されています。

0グッド

0クリップ

投稿2022/01/06 04:16

編集2022/01/06 09:09

追記:下記の質問ですが、状況が変わってしまいました。当初は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") }) }

↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
状況の変更により当初掲載していた上記の情報は不要になったかもしれません。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問