はじめに
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"
...
}
JWTについて
【React】React イチから学習《発展編》
【React】React イチから学習《基礎編》
強力なUIコンポーネントライブラリ「MUI（Material-UI）」について《トラブルシューティング編》
強力なUIコンポーネントライブラリ「MUI（Material-UI）」について《テーマ・スタイリング編》
強力なUIコンポーネントライブラリ「MUI（Material-UI）」について《コンポーネント編》
強力なUIコンポーネントライブラリ「MUI（Material-UI）」について《概要編》
インフラストラクチャ自動化ツール「Terraform」について《ベストプラクティスとトラブルシューティング編》
【CSS+JS】背景画像の視差効果（パララックス）を実装する方法
【CSS+JS】モーダルウィンドウを表示しその中にYouTube動画を動的に埋め込む
【Rails】アプリケーションサーバー「Unicorn」の基本情報と実装方法
【Git】マージにおけるfast-forwardとnon-fast-forwardの違い
MySQL Workbenchでリモートサーバー上のMySQLにSSH接続する方法【接続できない場合の対処法あり】
【Rails】忘れがちなルーティングの書き方を総復習
【Rails】忘れがちなGemfileの書き方を総復習
【Rails】M1チップ搭載MacでRuby on Railsの開発環境構築