Nuxt.js プロジェクトに firebase パッケージを追加したらビルドエラーが発生した

ある NuxtJS プロジェクトで Firebase Authentication を利用するために firebase パッケージを追加したところ、ビルドエラーが発生した。解決した方法をメモ。

使用しているパッケージのバージョンは以下。

nuxt: 2.11.0
firebase: 7.15.5
firebaseui: 4.5.1

yarn で firebase パッケージを追加した。

yarn add firebase firebaseui

yarn dev を実行した時にビルドエラーが発生するようになった。以下がエラーログ。

These dependencies were not found:

* core-js/modules/es6.array.find in ./.nuxt/client.js
* core-js/modules/es6.array.iterator in ./.nuxt/client.js, ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./components/FirebaseAuth.vue?vue&type=script&lang=js& and 1 other
* core-js/modules/es6.date.to-string in ./.nuxt/utils.js, ./.nuxt/components/nuxt.js
* core-js/modules/es6.function.name in ./.nuxt/client.js, ./middleware/authenticated.ts
* core-js/modules/es6.object.assign in ./.nuxt/client.js, ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./components/FirebaseAuth.vue?vue&type=script&lang=js& and 1 other
* core-js/modules/es6.object.keys in ./.nuxt/client.js, ./node_modules/babel-loader/lib??ref--13-0!./node_modules/ts-loader??ref--13-1!./node_modules/vue-loader/lib??vue-loader-options!./pages/templates.vue?vue&type=script&lang=ts&
* core-js/modules/es6.object.to-string in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js and 1 other
* core-js/modules/es6.promise in ./.nuxt/client.js, ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./components/FirebaseAuth.vue?vue&type=script&lang=js& and 1 other
* core-js/modules/es6.regexp.constructor in ./.nuxt/utils.js
* core-js/modules/es6.regexp.match in ./.nuxt/client.js
* core-js/modules/es6.regexp.replace in ./.nuxt/utils.js, ./.nuxt/components/nuxt.js
* core-js/modules/es6.regexp.search in ./.nuxt/utils.js
* 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/utils.js, ./.nuxt/components/nuxt.js
* core-js/modules/es6.string.includes in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js
* core-js/modules/es6.string.iterator in ./.nuxt/client.js
* core-js/modules/es6.string.repeat in ./.nuxt/utils.js
* core-js/modules/es6.string.starts-with in ./.nuxt/utils.js
* core-js/modules/es6.symbol in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js and 1 other
* core-js/modules/es7.array.includes in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js
* core-js/modules/es7.object.get-own-property-descriptors in ./.nuxt/index.js, ./node_modules/babel-loader/lib??ref--13-0!./node_modules/ts-loader??ref--13-1!./node_modules/vue-loader/lib??vue-loader-options!./pages/templates.vue?vue&type=script&lang=ts&
* core-js/modules/es7.promise.finally in ./.nuxt/client.js, ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./components/FirebaseAuth.vue?vue&type=script&lang=js& and 1 other
* core-js/modules/es7.symbol.async-iterator in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js
* core-js/modules/web.dom.iterable in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js and 1 other


To install them, you can run: npm install --save core-js/modules/es6.array.find 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

core-js のモジュールが見つからない、という旨のログが表示されている。

そもそも core-js についてちゃんと理解していなかったので簡単に整理すると、ECMAScript の新しい仕様や機能を古いブラウザで動かすための Polyfill を提供するライブラリ、という認識。現在は v3 (core-js@3) が開発されているが、事情により開発が止まっているという話もある。 ((https://qiita.com/yumetodo/items/eaf3b97aeae3d8c4a07e))

GitHub - zloirock/core-js: Standard Library

yarn.lock の diff を確認すると、@firebase/polyfill が core-js@3 に依存している。

+"@firebase/polyfill@0.3.36":
+  version "0.3.36"
+  resolved "https://registry.yarnpkg.com/@firebase/polyfill/-/polyfill-0.3.36.tgz#c057cce6748170f36966b555749472b25efdb145"
+  integrity sha512-zMM9oSJgY6cT2jx3Ce9LYqb0eIpDE52meIzd/oe/y70F+v9u1LDqk5kUF5mf16zovGBWMNFmgzlsh6Wj0OsFtg==
+  dependencies:
+    core-js "3.6.5"
+    promise-polyfill "8.1.3"
+    whatwg-fetch "2.0.4"

Nuxt.js では、@nuxt/babel-preset-app という、Babel のプリセットを提供するパッケージが core-js に依存している。デフォルトでは core-js@2 を使用するが、設定で core-js@3 に切り替えることができる。

core-js 自体は core-js@3 の開発を進めるようだし @firebase/polyfill は core-js@3 に依存しているので、core-js@3 に切り替えることにした。

切り替え方については、@nuxt/babel-preset-app の README に設定方法が書かれている。

nuxt.js/README.md at v2.13.1 · nuxt/nuxt.js · GitHub

nuxt.config.js に以下の設定を追加する。

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

僕の環境では、これでビルドエラーを解消できた。高度な使い方をしていないので後で問題が起こるかもしれない。

@firebase/auth など必要なパッケージのみインストールすることで回避する方法も試してみたものの、 firebaseui を使っている関係か別のビルドエラーが発生したので、core-js@3 を使う方法に落ち着いた。

Nuxt × Firebase の環境を作ったときに core-js まわりで怒られたこと - mitsu のぶろぐ