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

nuxt-firebase

nuxtとfirebaseを使って簡単なタイムラインぽいWebアプリを作ろうとした際に、buildしたタイミングでコケたという話です。
core jsが〜と怒涛のログが出てきました。。。

エラー時の状態

どうやって作ったか

npx create-nuxt-app hogehoge といったよくあるnuxtプロジェクトの作成コマンドで作りました。
オプションはちょいちょい入れていますが、それらは package.json 参照ということで。

nuxtのバージョンは 2.11.0 でした

package.json

...
"dependencies": {
    "firebase": "^7.8.0",
    "@nuxtjs/dotenv": "^1.4.1",
    "nuxt": "^2.0.0",
    "vuexfire": "^3.2.1"
  },
"devDependencies": {
    "@nuxtjs/eslint-config": "^1.0.1",
    "@nuxtjs/eslint-module": "^1.0.0",
    "@nuxtjs/vuetify": "^1.0.0",
    "@vue/test-utils": "^1.0.0-beta.27",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^24.1.0",
    "eslint": "^6.1.0",
    "eslint-config-prettier": "^4.1.0",
    "eslint-plugin-nuxt": ">=0.4.2",
    "eslint-plugin-prettier": "^3.0.1",
    "jest": "^24.1.0",
    "prettier": "^1.16.4",
    "vue-jest": "^4.0.0-0"
  }

...

でたエラー

普通に yarn dev と打ち込んだら

 ERROR  Failed to compile with 34 errors

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
* 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
* core-js/modules/es6.object.assign in ./.nuxt/client.js
* core-js/modules/es6.object.keys in ./.nuxt/utils.js
* core-js/modules/es6.object.to-string in ./.nuxt/router.scrollBehavior.js, ./.nuxt/components/nuxt.js
* core-js/modules/es6.promise in ./.nuxt/client.js
* 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/index.js, ./.nuxt/components/nuxt-link.client.js
* 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/utils.js
* core-js/modules/es7.promise.finally in ./.nuxt/client.js
* 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/utils.js, ./.nuxt/components/nuxt-link.client.js

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

To install them, you can run: npm instal ... と言われたって「はいそうですが」とinstallはしないので回避策を調査。
とりあえず firebase のuninstallしたらまたちゃんと動いたので、 firebaseのインストールが起因してることはわかった。(firebaseが悪いとは言ってない)

参考 qiita.com

結論

一旦採用したもの

@firebase/app
@firebase/firestore
@firebase/auth

個別にインストールしたらエラーが出ずにbuildされました。

github.com

公式の情報によると

v2.6.0時で、 nuxt.config.js をいじってcore-jsの2系と3系を入れてbuildできるようにサポートしてるよ、とのこと。 nuxtjs.org

余談

firebaseが原因？

firebase が悪いのか、と言われたらそのへんは厳密にはわからないかんじですね。
どちらかというと nuxt と組み合わせるとコケてるよ、といった話が。。。

github.com

nuxt上でのissue

firebase をキーワードにしたissueはあがってなさそう・・・？ github.com

core-js 3系のデフォルト対応

今回の件、わざわざconfigをいじらなきゃいけないというところもあって、本来ならnuxt側がそもそも対応してたほうがよいのでは？と思いつつ、v2.6.0以降のリリースノートを見てもcore-jsまわりの話はなさそう。。。
と、思ってたら3系にあげる動き自体はあるようです。 github.com

これが入ったらわざわざconfigいじらなくてもよくなるのだろうか・・・
今後のverupに期待。

mitsuのぶろぐ

基本的にはプログラミングの話のつもり。