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

2020年6月9日 14:16

はじめに

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"
  ...
}

関連記事

【Nuxt.js】GitHubからセキュリティアラートが届いたときの対応【package.json】
# はじめに GitHubでソース管理を行っているプロジェクトに`package.json`のセキュリティアラートが届いたときの対応を記載します。 今回はNuxt.jsで作成したプロジェクトでの対応記録のため、タイトルなどに「Nuxt.js [...]
2020年6月8日 18:01
【カテゴリ別】Nuxt.js関連の記事まとめ
# はじめに Nuxt.js関連の記事が増えてきたので、この記事でカテゴリ別にまとめたいと思います。 # 最初の一歩 - [Nuxt\.jsプロジェクトの作成から動作確認までの手順](https://www.autovice.jp/art [...]
2020年3月17日 10:40
Nuxt.jsプロジェクトでFirebase AuthenticationのGoogle認証でログインし、認証情報をLocal Storageに保存する
# はじめに この記事ではFirebase AuthenticationのGoogle認証を利用してログイン機能を作成し、そのログイン情報をブラウザのLocal Storageに保存する方法を解説します。 この記事で作成したNuxt.jsプ [...]
2020年3月17日 10:21
Nuxt.jsプロジェクトでFirebase Storageにアップロードした画像を変更/削除する
# はじめに 数回に分けてNuxt.jsプロジェクトでデータの永続化を行う方法を解説しています。これらの記事は上から順番に読んでいくことを想定しています。 - [Nuxt\.jsプロジェクトでFirestoreを利用したデータの永続化/取り [...]
2020年3月16日 16:52
Nuxt.jsプロジェクトでFirebase Storageに画像ファイルをアップロードする
# はじめに 数回に分けてNuxt.jsプロジェクトでデータの永続化を行う方法を解説しています。これらの記事は上から順番に読んでいくことを想定しています。 - [Nuxt\.jsプロジェクトでFirestoreを利用したデータの永続化/取り [...]
2020年3月16日 15:06