Next.jsのプロジェクトでSSR対応させた時に、Firestoreとの連携を `firebase-admin` を使ってやることになりました。frontでもfirestoreと接続しているので、完全に移行できたわけではありません。


# 問題
ローカルでSSRしたページに行った後、SPAのページへいくと以下のエラーが出ました。

![img](/mosaic-code.jpg)

# 原因
はっきりとした原因はわかりませんが、
`firebase-admin` を読み込んだ後に `firestore` を読み込むとエラーが発生します。

`config/backend/firebase.ts`

![img](/mosaic-code.jpg)

`config/firebase.ts`

![img](/mosaic-code.jpg)

# 解決方法

とりあえず、backendの設定を読み込むときに再度、firestoreのsettingsを読み込むことが原因に見えるので、
ブラウザの時だけ読み込むように修正すると直りました。

![img](/mosaic-code.jpg)

Next.jsのプロジェクトでSSR対応させた時に、Firestoreとの連携を `firebase-admin` を使ってやることになりました。frontでもfirestoreと接続しているので、完全に移行できたわけではありません。


# 問題
ローカルでSSRしたページに行った後、SPAのページへいくと以下のエラーが出ました。

```bash
Firestore has already been started and its settings can no longer be changed. You can only modify settings before calling any other methods on a Firestore object.
```

# 原因
はっきりとした原因はわかりませんが、
`firebase-admin` を読み込んだ後に `firestore` を読み込むとエラーが発生します。

`config/backend/firebase.ts`

```js
import * as admin from 'firebase-admin'

let serviceAccount = null

if (!admin.apps.length) {
  serviceAccount = require(`src/config/service-account-dev.json`)
  admin.initializeApp({
    credential: admin.credential.cert(serviceAccount),
  })
}

const firestore = admin.firestore()
export { firestore }
```

`config/firebase.ts`

```js
import fb from 'firebase'
import 'firebase/storage'

...省略

const firestore = firebase.firestore()
firestore.settings({ ignoreUndefinedProperties: true, merge: true })

if (process.browser) {
  firebase.analytics()
}

export { firestore }
```

# 解決方法

とりあえず、backendの設定を読み込むときに再度、firestoreのsettingsを読み込むことが原因に見えるので、
ブラウザの時だけ読み込むように修正すると直りました。

```js
import fb from 'firebase'
import 'firebase/storage'

...省略

const firestore = firebase.firestore()

if (process.browser) {
  firebase.analytics()
  firestore.settings({ ignoreUndefinedProperties: true, merge: true }) # 移動
}

export { firestore }
  firestore.settings({ ignoreUndefinedProperties: true, merge: true })
```

問題

原因

続きを読むには単価診断を受けてください（30秒）