[nuxt x firebase] IE11で 'Headers' is undefined と出る

状況

環境

• Nuxt 2.10.2
• firebase 6.4.0

Nuxt x firebase で開発していて、IE11で functions（onCall関数）を叩いた時にエラーが出た。

const getUser = functions.httpsCallable('getUser');
getUser();

エラー内容

Unhandled promise rejection ReferenceError: 'Headers' は定義されていません。
// もしくは 'Headers' is undefined

とブラウザのコンソールに出る。

原因

firebaseのバージョン
5.11.1までは動作するが、6.0.0から動作しない

IE11がfetch対応していないのが問題
https://stackoverflow.com/questions/47534859/headers-is-undefined-in-ie11

6.0.0からはplyfillが必要みたい
https://firebase.google.com/support/guides/environments_js-sdk?hl=ja#suggested-polyfills

@babel/preset-envを入れて見たけどうまくいかない
https://github.com/babel/babel/issues/9160

解決

以下のようにすることで、6.0.0以降でもIE11で動作するようになります。
（正攻法かどうかは分かりません）

whatwg-fetchをインストール

$ npm install whatwg-fetch

pluginファイルを作成する

plugins/polyfill.ts

import 'whatwg-fetch';

configで読み込む

nuxt.config.ts

plugins: [
  '@/plugins/polyfill'
],