Vue3+Firebase error解決の備忘録（Uncaught TypeError: firebase_compat_app__WEBPACK_IMPORTED_MODULE_0__.default.auth is not a function）

初めに

こんにちは。

このerrorに2時間格闘し勝ったので備忘録です。

version
node.js 14.18.1
vue 3.0.0
Firebase 9.6.1

error文

console.log

Uncaught TypeError: firebase_compat_app__WEBPACK_IMPORTED_MODULE_0__.default.auth is not a function

事象

Vue3とFirebase databaseの接続を試み、ローカルのビルド時に発生したエラー文。
画面真っ白になって上記のエラーがconsole上に出現。

問題箇所はここでした。

firebase/config.js

// 【原因】ここから
import firebase from "firebase/app"; 
import "firebase/firestore"; 
import "firebase/auth";
import "firebase/storage";
// 【原因】ここまで

const firebaseConfig = {
    apiKey: ***************************,
    authDomain: ***************************,
    databaseURL: ***************************,
    projectId: ***************************,
    storageBucket: ***************************,
    messagingSenderId: ***************************,
    appId: ***************************,
};

// init firebase
firebase.initializeApp(firebaseConfig); // バックエンドのfirebaseを初期化する

// init firestore service
const projectFirestore = firebase.firestore(); // firebaseのサービスも初期化する
const projectAuth = firebase.auth();
const projectStorage = firebase.storage();

const timestamp = firebase.firestore.FieldValue.serverTimestamp; //firebaseのtimestamp

export { projectFirestore, projectAuth, projectStorage, timestamp };

解決方法

インポートのパスが違うようです。
公式にも乗ってなかったし何なん。

compat

解決後、

firebase/config.js

// compatのパスをかませるだけ
import firebase from "firebase/compat/app";
import "firebase/compat/firestore";
import "firebase/compat/auth";
import "firebase/compat/storage";

const firebaseConfig = {
    apiKey: ***************************,
    authDomain: ***************************,
    databaseURL: ***************************,
    projectId: ***************************,
    storageBucket: ***************************,
    messagingSenderId: ***************************,
    appId: ***************************,
};

// init firebase
firebase.initializeApp(firebaseConfig); // バックエンドのfirebaseを初期化する

// init firestore service
const projectFirestore = firebase.firestore(); // firebaseのサービスも初期化する
const projectAuth = firebase.auth();
const projectStorage = firebase.storage();

const timestamp = firebase.firestore.FieldValue.serverTimestamp; //firebaseのtimestamp

export { projectFirestore, projectAuth, projectStorage, timestamp };

最後に

どこに書いてあんねん・・・

参考