【Nuxt.js+Firebase】core-js関連のエラーが大量に出力される事象の原因と対処

はじめに

Nuxt.jsプロジェクトでFirebaseを使っていると、テストサーバー起動時やデプロイ時にcore-js関連のエラーが大量に出力されることがあります。

なぜエラーが出力されるのか、どうすれば解消できるのかをまとめました。

事象

先日、GitHubでソース管理を行っているNuxt.jsプロジェクトにセキュリティアラートが届いたので対応を行いました。

セキュリティアラートが出ているパッケージ以外もすべて最新バージョンにアップデートしようと思い、以下のコマンドを実行しました。

$ ncu -u
$ npm update

そして、動作確認を行おうとテストサーバーを起動しようとしたところ、core-js関連のエラーが大量に出力されるようになりました。

$ npm run dev

...

 ERROR  Failed to compile with 42 errors                                                                                                                                                 friendly-errors 23:42:08

These dependencies were not found:                                                                                                                                                       friendly-errors 23:42:08
                                                                                                                                                                                         friendly-errors 23:42:08
* core-js/modules/es6.array.find in ./.nuxt/client.js                                                                                                                                    friendly-errors 23:42:08
* core-js/modules/es6.array.from in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js                                                                                            friendly-errors 23:42:08
* core-js/modules/es6.array.iterator in ./.nuxt/client.js                                                                                                                                friendly-errors 23:42:08
* core-js/modules/es6.date.to-string in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js                                                                                        friendly-errors 23:42:08
* core-js/modules/es6.function.name in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js and 2 others                                                                            friendly-errors 23:42:08
* core-js/modules/es6.object.assign in ./.nuxt/client.js                                                                                                                                 friendly-errors 23:42:08
* core-js/modules/es6.object.keys in ./.nuxt/client.js                                                                                                                                   friendly-errors 23:42:08
* core-js/modules/es6.object.to-string in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js and 2 others                                                                         friendly-errors 23:42:08
* core-js/modules/es6.promise in ./.nuxt/client.js                                                                                                                                       friendly-errors 23:42:08
* core-js/modules/es6.regexp.constructor in ./.nuxt/utils.js                                                                                                                             friendly-errors 23:42:08
* core-js/modules/es6.regexp.match in ./.nuxt/client.js                                                                                                                                  friendly-errors 23:42:08
* core-js/modules/es6.regexp.replace in ./.nuxt/utils.js, ./.nuxt/components/nuxt.js                                                                                                     friendly-errors 23:42:08
* core-js/modules/es6.regexp.search in ./.nuxt/utils.js                                                                                                                                  friendly-errors 23:42:08
* core-js/modules/es6.regexp.split in ./.nuxt/utils.js, ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./.nuxt/components/nuxt-build-indicator.vue?vue&type=script&lang=js&
* core-js/modules/es6.regexp.to-string in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js                                                                                      friendly-errors 23:42:08
* core-js/modules/es6.string.includes in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js                                                                                       friendly-errors 23:42:08
* core-js/modules/es6.string.iterator in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js                                                                                       friendly-errors 23:42:08
* core-js/modules/es6.string.repeat in ./.nuxt/utils.js                                                                                                                                  friendly-errors 23:42:08
* core-js/modules/es6.string.starts-with in ./.nuxt/utils.js                                                                                                                             friendly-errors 23:42:08
* core-js/modules/es6.symbol in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js                                                                                                friendly-errors 23:42:08
* core-js/modules/es7.array.includes in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js                                                                                        friendly-errors 23:42:08
* core-js/modules/es7.object.get-own-property-descriptors in ./.nuxt/index.js                                                                                                            friendly-errors 23:42:09
* core-js/modules/es7.promise.finally in ./.nuxt/client.js                                                                                                                               friendly-errors 23:42:09
* core-js/modules/es7.symbol.async-iterator in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js                                                                                 friendly-errors 23:42:09
* core-js/modules/web.dom.iterable in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js                                                                                          friendly-errors 23:42:09
                                                                                                                                                                                         friendly-errors 23:42:09
To install them, you can run: npm install --save core-js/modules/es6.array.find core-js/modules/es6.array.from core-js/modules/es6.array.iterator core-js/modules/es6.date.to-string core-js/modules/es6.function.name core-js/modules/es6.object.assign core-js/modules/es6.object.keys core-js/modules/es6.object.to-string core-js/modules/es6.promise core-js/modules/es6.regexp.constructor core-js/modules/es6.regexp.match core-js/modules/es6.regexp.replace core-js/modules/es6.regexp.search core-js/modules/es6.regexp.split core-js/modules/es6.regexp.to-string core-js/modules/es6.string.includes core-js/modules/es6.string.iterator core-js/modules/es6.string.repeat core-js/modules/es6.string.starts-with core-js/modules/es6.symbol core-js/modules/es7.array.includes core-js/modules/es7.object.get-own-property-descriptors core-js/modules/es7.promise.finally core-js/modules/es7.symbol.async-iterator core-js/modules/web.dom.iterable

原因

結論から言うと、Nuxt.jsで使用しているcore-jsのバージョンと、Firebaseで使用しているcore-jsのバージョンが異なることが原因です。

Nuxt.jsはcore-js@2の使用を推奨しています。Nuxt.jsプロジェクト作成時にインストールされるのはcore-js@2です。

Firebaseインストール時のバージョンは7.11.0でした。Firebase@7ではcore-js@3を使用するらしいのですが、Firebaseのインストール時にcore-js@2→3にアップデートされることはなく、core-js@2でも正常に動作していました。

しかし今回、Firebaseのアップデートを行った際、core-js@2→3にアップデートされ、Nuxt.jsからcore-js@2が読み込めなくなったことで、エラーが出力されるようになったのではないかと思います。

対処

core-js@2を使用する場合

先述の通り、Nuxt.jsはcore-js@2の使用を推奨しています。また、Firebaseはcore-js@2でも正常に動作することがわかっているので、core-js@3→2にダウングレードしましょう。

パッケージをダウングレードするには以下のコマンドを実行します。

$ npm install core-js@2.6.11
# or
$ yarn upgrade core-js@2.6.11

core-js@3を使用する場合

どうしてもcore-js@3を使いたい場合、nuxt.config.jsに以下を追記します。

export default {
  build: {
    babel: {
      presets({ isServer }) {
        return [
          [
            require.resolve('@nuxt/babel-preset-app'),
            // require.resolve('@nuxt/babel-preset-app-edge'), // For nuxt-edge users
            {
              buildTarget: isServer ? 'server' : 'client',
              corejs: { version: 3 }
            }
          ]
        ]
      }
    }
  }
}

おまけ

core-jsのバージョンはnode_modules/core-js/package.jsonに記載されています。

$ vi node_modules/core-js/package.json

{
  ...
  "version": "2.6.11"
  ...
}