Zenn
👩‍🚒

FirebaseUI を CDN から利用する時の firebase の import

2021/08/27に公開
Firebase
CDN
Firebase Auth
tech

はじめに

Netlify みたいに日本から遠いホスティングサービスを使っていると、firebase のライブラリみたいな大きい bundle の初回ダウンロードが初回起動の遅さのネック[1]になったりするので、npm で自身の bundle から追い出して、jsDeliver みたいな日本からも近い CDN からの利用に変えたくなるのですが、普通にやるとTypeError: Cannot read property 'auth' of undefinedってエラーがでて、数ヶ月間[2]悩んだりします

原因

原因は firebase の import が npm からの場合と CDN からの場合で違うからです

npm からの場合

こちらは firebase のドキュメント に以下のような記載があるのですが

import firebase from "firebase/app"

CDN からの場合

こちらは firebase のドキュメント になぜか記載がない（これが３ヶ月も悩んだ根本原因なんですが）、正解はこちらのようです

import * as firebase from 'firebase'
脚注

  1. こちらに詳細を書きました ↩︎

  2. 私は３ヶ月悩みました ↩︎

Discussion