GatsbyでFirebase Analyticsを使うとビルドでエラる問題

6160 ワード
gatsby React Firebase Firebase テキストリンク

トラブル

最近Gatsbyで個人サイトを作っていて、Firebase Hostingを使ってるのでついでにFirebase Analyticsも使おうと思って、gatsby-plugin-firebaseをインストールして、ドキュメンテーションに従ってセットアップしたらビルドでこの様なエラーが出ました。

ネットで解決方法を探して、下のようにWebpack設定を変更してみてもなかなかうまくいきませんでした。

gatsby-node.js
exports.onCreateWebpackConfig = ({ stage, actions, getConfig }) => {
    if (stage === 'build-html') {
    actions.setWebpackConfig({
      externals: getConfig().externals.concat(function(context, request, callback) {
        const regex = /^@?firebase(\/(.+))?/;
        if (regex.test(request)) {
          return callback(null, `umd ${request}`);
        }
        callback();
      }),
    });
  }
};

（これが効く場合もあります、詳細は文の最後に）

解決方法

今回問題はNode.jsで使えないFirebaseのAnalyticsパッケージを使ってしまったのが理由でした（そしてそれについて完全に忘れてしまったのも理由の一つでした）。
それでAnalyticsに関連する関数を使う前に一回ブラウザー環境チェックして、ブラウザ環境であることを確認してからAnalyticsを使えば問題解決となります。

index.js
const isBrowser = typeof window !== "undefined"
  if (isBrowser) {
    firebase.analytics().logEvent('visited_home_page')
  }

これで解決になりますが、使うことに環境チェックするのはちょっとめんどくさいので、useFirebaseAnalyticsという別のユーティリティ関数として抽出しました。（カスタムフックではないのに名前をuse何ちゃらにしてしまいすみません）

fbAnalytics.js
import firebase from "gatsby-plugin-firebase"

// Build throw error if it's ran on node
// Adding an isBrowser to ensure that the below code would only ran on browser
const useFirebaseAnalytics = logEvent => {
  const isBrowser = typeof window !== "undefined"
  if (isBrowser) {
    firebase.analytics().logEvent(logEvent)
  }
}
export default useFirebaseAnalytics

これでFirebase Analyticsがちゃんと動き出しました。

後書き

解決方法の前に書いてある方法は実際Firestoreなどを使うときビルド失敗した場合にちゃんと効くらしいので、必要がある方はぜひ。
今回は単純にFirebase Analyticsがブラウザでしか使えないことを忘れてしまうことでビルド失敗しましたが、自分と同じく忘れん坊な方のために文章にしました。ご清聴ありがとうございました。