事象

nuxt.jsで、Firebase Firestoreを扱うアプリケーションを作成している最中に、Firestoreのエミュレータを使いたいなぁと思って、Firebaseの初期設定をしているコード部分に以下のようなコードを追記しました。

なお、nuxtはUniversalモード（SSRモード）で動かしています。

firebase.js

import firebase from 'firebase/app';
import 'firebase/firestore';

export const database = firebase.firestore();

// ***** エミュレータを使うために下記コードを追記 *****
database.settings({
  host: 'localhost:8080',
  ssl: false,
})
console.warn('Firebase Firestore is emulator!');

すると、次のようなエラーメッセージが出るようになってしまいました。

Function Firestore.settings() requires its first argument to be of type object, but it was: a custom Object object

解決策

nuxt-community/firebase-moduleの、下記Issueにて、同様の事象について取り扱われていました。

[SSR] Setting firestore.settings results in "Function Firestore.settings() requires its first argument to be of type object, but it was: a custom Object object" #116

Universalモードの場合のみ、発生するようです。どうやら、nuxt.config.jsに、下記を追記すると治るらしい。

nuxt.config.js

export default {
  mode: 'universal',
  // ***** 追記部分　ここから *****
  render: {
    bundleRenderer: {
      runInNewContext: false,
    },
  },
  // ***** 追記部分　ここまで *****
};

runInNewContextがどういう設定項目なのかについては、Vue SSR ガイドに記載されています。

Vue SSR ガイド / APIリファレンス

詳しくは、このリファレンスの説明を読んでいただければと思いますが、その中に、次のような記述があります。

このオプションは、下位互換のためデフォルトは true です。しかし、可能ならば常に runInNewContext: false または、runInNewContext: 'once'を使用することが推奨されます。

ですので、通常であれば、falseにしておいて影響はなさそうです。（これ以上は調べていません。ごめんなさい。）

NuxtからFirestoreエミュレータを使おうとしたらエラー：Function Firestore.settings() requires its first argument to be of type object, but it was: a custom Object object

事象

解決策