Zenn
🐶

Firebase SDKでのトラブルシューティング【Javascript】

2021/12/10に公開
Firebase
javscript
tech

はじめに

以下のようなエラーで躓いたため、備忘録。

"export 'default' (imported as 'firebase') was not found in 'firebase/app'

調べた感じだと、3 種類の方法で import 方法が記載されており、それぞれ version が原因でした。ここで記載するのは 2021 年 11 月現在における情報です。この感じからすると、定期的なアップデートによってやり方がよく変わるようなので、今後このことを念頭に使用した方が良いと考えます。

サンプルコード

サンプルコードを以下に示します。自分の場合は Vue.js で使用しているため、「./src」直下に「firebase.js」を用意し、それを「main.js」で呼び出しています。ただ、以下のように initializeApp を呼び出し、設定する必要があります。前のバージョンでは呼び出し方が変わるため、注意してください。公式ドキュメントでも、ものによって古いスニペットのままになっている場合があります。

import { initializeApp } from "firebase/app";
import { getMessaging } from "firebase/messaging";
const config = {
  apiKey: "",
  projectId: "",
  authDomain: [],
  messagingSenderId: "",
  appId: "",
};
let app = initializeApp(config);

参考

https://litely.net/post/tech/firebase/guide/authentication_vue/
https://firebase.google.com/docs/web/modular-upgrade

Discussion