【vue】 nuxtで「core-js/modules/es6.array.find in ./.nuxt/client.js」エラー
create-nuxt-appした後に、firebaseを入れたら、以下のエラーが発生するようになってしまったのを解決しました。数時間ハマった・・・
事象
create-nuxt-app hogehoge yarn add firebase yarn run dev
create-nuxt-appで作ったプロジェクトに対して、firebaseを入れたら以下のエラーでビルドが通らなくなりました。
ERROR Failed to compile with 34 errors friendly-errors 12:14:14 These dependencies were not found: friendly-errors 12:14:14 friendly-errors 12:14:14 * core-js/modules/es6.array.find in ./.nuxt/client.js friendly-errors 12:14:14 * core-js/modules/es6.array.iterator in ./.nuxt/client.js friendly-errors 12:14:14 * core-js/modules/es6.date.to-string in ./.nuxt/utils.js, ./.nuxt/components/nuxt.js * core-js/modules/es6.function.name in ./.nuxt/index.js friendly-errors 12:14:14 * core-js/modules/es6.object.assign in ./.nuxt/client.js friendly-errors 12:14:14 * core-js/modules/es6.object.keys in ./.nuxt/client.js friendly-errors 12:14:14 * 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 friendly-errors 12:14:14 * core-js/modules/es6.regexp.constructor in ./.nuxt/utils.js friendly-errors 12:14:14 * core-js/modules/es6.regexp.match in ./.nuxt/client.js friendly-errors 12:14:14 * core-js/modules/es6.regexp.replace in ./.nuxt/utils.js, ./.nuxt/components/nuxt.js * core-js/modules/es6.regexp.search in ./.nuxt/utils.js friendly-errors 12:14:14 * 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 friendly-errors 12:14:14 * core-js/modules/es6.string.repeat in ./.nuxt/utils.js friendly-errors 12:14:14 * core-js/modules/es6.string.starts-with in ./.nuxt/utils.js friendly-errors 12:14:14 * core-js/modules/es6.symbol in ./.nuxt/client.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 friendly-errors 12:14:14 * core-js/modules/es7.symbol.async-iterator in ./.nuxt/axios.js, ./.nuxt/components/nuxt-link.client.js * core-js/modules/web.dom.iterable in ./.nuxt/axios.js, ./.nuxt/components/nuxt-link.client.js friendly-errors 12:14:14 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 ↻ Updated .nuxt/App.js
エラーメッセージを読むと、
npm install --save core-js/modules/es6.array.find
するといいよ！って買いてあるのだけど、これは罠。そんなライブラリは無いのでこれでは解決しません。
対応
私の環境では、以下で解決しました。 Release Notes - Nuxt.js
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 } } ] ] } } } }
その他調べたページ
Dosn't work with core-js@3 · Issue #2554 · firebase/firebase-js-sdk · GitHub
error core-js/modules/ ... when updating to 7.5.0 · Issue #2390 · firebase/firebase-js-sdk · GitHub
まとめると、どうもcore.jsの2系と3系が混在すると色々なところで色々起きるらしいです。（babel周りの知識があやふやなのでちゃんと理解できなかったのだけど）
私の場合、firebaseを入れることによって2系と3系が両方入ってしまい、nuxt側でうまくハンドリングできていなかったのを、明示的に3を使う指定する事でうまくいきました。
ちなみに、firebaseのcore.jsへの依存関係はここらへんです。
core-js@3.6.2: version "3.6.2" resolved "https://registry.npmjs.org/core-js/-/core-js-3.6.2.tgz#2799ea1a59050f0acf50dfe89b916d6503b16caa" integrity sha512-hIE5dXkRzRvnZ5vhkRfQxUvDxQZmD9oueA08jDYRBKJHx+VIl/Pne/e0A4x9LObEEthC/TqiZybUoNM4tRgnKg== core-js@^2.4.0: version "2.6.10" resolved "https://registry.npmjs.org/core-js/-/core-js-2.6.10.tgz#8a5b8391f8cc7013da703411ce5b585706300d7f" integrity sha512-I39t74+4t+zau64EN1fE5v2W31Adtc/REhzWN+gWRRXg6WH5qAsZm62DHpQ1+Yhe4047T55jvzz7MUqF/dBBlA==
思いっきり2系と3系が混在していますね。
firebaseをまるごとインストール（yarn add firebaseとか）ではなくて、サービスごとに個別でインストール（yarn add @firebase/appとか）だと、2系と3系の混在は起きないのだけど、firebaseuiがうまく動かなかった、、、
なんかここらへん辛いな〜と思ったら、nuxt.jsがfirebaseを名指しで指摘してました。bable周り辛い。
Because of how package managers (yarn, npm) work, a wrong version of a > dependency from one of the other dependencies may be hoisted into node_modules. Nuxt is strict about this and provides instructions for dependency resolution so please follow it.
The well-known problem is with firebase package that requires to manually install node-fetch dependency in your project.
google翻訳
パッケージマネージャー（yarn、npm）の動作方法により、他の依存関係の1つからの誤ったバージョンの依存関係がnode_modulesに巻き込まれる場合があります。 Nuxtはこれについて厳密であり、依存関係の解決手順を提供しますので、それに従ってください。
よく知られている問題は、プロジェクトにノードフェッチ依存関係を手動でインストールする必要があるfirebaseパッケージにあります。
