【firebase】firebase.関数名() is not a function がでた際に確認する事【Javascript】

はじめに

特に難しい内容ではないのですが躓いたのでメモ。

何かしらの記事を参考にしながらfirebaseの接続を行った際に

firebase.firestore() is not a function
firebase.storage() is not a function
firebase.auth() is not a function

等のエラーが発生したことがありませんか?

今回はこのエラーが出現した際に行う対処法の紹介です。

1.Nuxtでモジュールとして読み込む場合

モジュールとして読み込む場合、firebase.js等のファイルを作成して、以下の記述をするかと思います。

import * as firebase from 'firebase';

実は、firestore等を利用する際はこれだけでは記述が不足しています。

import * as firebase from 'firebase';
// 新規追加
import 'firebase/auth';
import 'firebase/firestore';

のように、使いたいサービスのモジュールを新しく読み込む必要があります。

参考:https://stackoverflow.com/questions/46636255/firebase-firestore-is-not-a-function-when-trying-to-initialize-cloud-firestore

2.Nuxtでモジュールとして読み込む場合(firebase , firebase-admin両方使用している場合）

本来であれば、両方が同じプロジェクトに存在する事はない？のですが、様々な理由で使用せざるを得なくなる場合があると思います。

ですが、fierbase,firebase-adminの両方を使用しているプロジェクトの場合、npm i でインストールするタイミングによりエラーが発生するバグがあるそうです。

手順としては、

1. node_modulesの削除
2. package-lock.jsonの削除
3. npm iを実行

以上の事を行えば、firebaseとfirebase-adminが正しい順序でインストールされ、エラーが発生しなくなるかもしれません。

参考:https://github.com/firebase/firebase-js-sdk/issues/752

3.CDNから配信されたものを使用する場合

1.と同じです。

<script src="https://www.gstatic.com/firebasejs/7.19.0/firebase-app.js"></script>

上記のようにCDNを用いて.vueファイル等で直接firebaseを読み込んでいる場合、

<script src="https://www.gstatic.com/firebasejs/7.19.0/firebase-app.js"></script>
// 新規追加
<script src="https://www.gstatic.com/firebasejs/7.19.0/firebase-auth.js"></script>  
<script src="https://www.gstatic.com/firebasejs/7.19.0/firebase-database.js"></script>

firebase-app.jsのみだと、 authやfirestoreが使用出来ません。
なので、使いたいサービス（firestore,auth,function等)を明示的に読み込む必要がありました。

参考:https://qiita.com/sota0726/items/e9ab104df3ec77d00f8e

4.もしかして

1.と 2. を実施しても治らない場合、firebaseがインストールされていない可能性があります。

私はこれでした。　
当たり前にインストールしているだろうと思って確認しなかったのですが、案外気づかないものですね。

packeage.jsonのdevDependencies またはdependenciesの中に,

"firebase": "^7.19.0",　　　（バージョンは異なります）

と記述はありますか？