【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

[v2] Error: Cannot find module 'core-js/modules/es6.array.filter' · Issue #7862 · gatsbyjs/gatsby · GitHub

error core-js/modules/ … when updating to 7.5.0 · Issue #2390 · firebase/firebase-js-sdk · GitHub

core-js dependency breaks when using nuxt in monorepo with another package that's using newer core-js · Issue #6336 · nuxt/nuxt.js · GitHub

まとめると、どうもcore.jsの2系と3系が混在すると色々なところで色々起きるらしいです。(babel周りの知識があやふやなのでちゃんと理解できなかったのだけど)

私の場合、firebaseを入れることによって2系と3系が両方入ってしまい、nuxt側でうまくハンドリングできていなかったのを、明示的に3を使う指定する事でうまくいきました。

ちなみに、firebaseのcore.jsへの依存関係はここらへんです。

firebase-js-sdk/yarn.lock at 6898eb8996bfd42ca8220cb91acebf4569d64ddf · firebase/firebase-js-sdk · GitHub

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パッケージにあります。

コメント

タイトルとURLをコピーしました