Vercel(Now.sh)にNuxt.js(SSR)をデプロイすると、Firebase関連でSSR時にNuxt.js Internal Server Errorになるのを修正する

めちゃくちゃハマったので、検索でたどり着く人のためにメモ

# 解決策

[Nuxt\.js Internal Server Error with firebase · Issue \#41 · nuxt/now\-builder](https://github.com/nuxt/now-builder/issues/41)

`nuxt.config.js`に以下を追記

```nuxt.config.js
 build: {
    extend ( config, { isDev, isClient, isServer } ) {
      if ( isServer ) {
        config.externals = {
          '@firebase/app': 'commonjs @firebase/app',
          '@firebase/firestore': 'commonjs @firebase/firestore',
          //etc...
        }
      }
    }
}
```

# 詳細

Vercel（旧Now.sh）にNuxt.js(SSR)をデプロイしたところ、ログインページをリロードしたところ、`Nuxt.js Internal Server Error`が出た。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156690/ef6f99fc-6821-9f9e-d110-49f5150b2648.png)

nuxt-linkなどで遷移してもエラーは出ないが、ページをリロードすると、エラーになる。

Vercelのログを見るとこうなっていた

```
render function or template not defined in component: anonymous
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156690/844e4432-31f8-1271-2625-5112298fbcb1.png)



いろいろ調べていくと、Firebaseを使っているページでSSRすると、エラーになるよう。


どうやら、Vercelが内部的にLambdaを使用していて、LambdaとFirebaseは相性が悪いことが原因らしい。

[Nuxt\.js Internal Server Error with firebase · Issue \#41 · nuxt/now\-builder](https://github.com/nuxt/now-builder/issues/41)に詳細が乗っていた。

上記に従って、以下のようにして解決した


`nuxt.config.js`に以下を追記

```nuxt.config.js
 build: {
    extend ( config, { isDev, isClient, isServer } ) {
      if ( isServer ) {
        config.externals = {
          '@firebase/app': 'commonjs @firebase/app',
          '@firebase/firestore': 'commonjs @firebase/firestore',
          //etc...
        }
      }
    }
}
```



以下ツイート


<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">なんか一部のページの表示が無限にうまく行かなくて一日消費してる <a href="https://t.co/j985Kq3BEh">pic.twitter.com/j985Kq3BEh</a></p>&mdash; れとるときゃりー@ツイッター通話アプリ作ってるなう (@retoruto_carry) <a href="https://twitter.com/retoruto_carry/status/1256937652562976769?ref_src=twsrc%5Etfw">May 3, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">この辺のimportがうまくいってないっぽい。<br><br>一日使ったけど、ちょっと解決が厳しそうなのであきらめてheroku使います....<br><br>(´；ω；｀) <a href="https://t.co/nErccUqRtG">pic.twitter.com/nErccUqRtG</a></p>&mdash; れとるときゃりー@ツイッター通話アプリ作ってるなう (@retoruto_carry) <a href="https://twitter.com/retoruto_carry/status/1256959004145676288?ref_src=twsrc%5Etfw">May 3, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">SSR時にだけNuxt.js Internal Server Errorでrender function or template not defined in component: anonymousになる。<br><br>herokuでデプロイすると動くけど、Vercelだと動かない。<br><br>環境変数には問題がなさそう</p>&mdash; れとるときゃりー@ツイッター通話アプリ作ってるなう (@retoruto_carry) <a href="https://twitter.com/retoruto_carry/status/1256962290781261824?ref_src=twsrc%5Etfw">May 3, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>



<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">これか？？<a href="https://t.co/VyKF4k4Rqd">https://t.co/VyKF4k4Rqd</a></p>&mdash; れとるときゃりー@ツイッター通話アプリ作ってるなう (@retoruto_carry) <a href="https://twitter.com/retoruto_carry/status/1256962718126358531?ref_src=twsrc%5Etfw">May 3, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Vercleが内部的にLambdaを使用していて、LambdaとFirebaseは相性が悪いことに起因するっぽい<br><br>こんなの初見で分かるわけね〜〜〜〜〜〜〜〜〜〜〜〜〜そもそもFirebaseが原因ってことに行き着くまで4時間くらいかかったわ<br><br>めちゃくちゃハマってしまった</p>&mdash; れとるときゃりー@ツイッター通話アプリ作ってるなう (@retoruto_carry) <a href="https://twitter.com/retoruto_carry/status/1256966223893368832?ref_src=twsrc%5Etfw">May 3, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>