NuxtJS（＋Vuetify）にFirebaseを入れたらビルドエラーが出る

バージョン

"firebase": "^7.14.6"
"nuxt": "^2.0.0"
"@nuxtjs/vuetify": "^1.0.0"

エラー

core-js 関連でエラーが出ていることが分かります。

ERROR in ./node_modules/vuetify/lib/util/helpers.js
Module not found: Error: Can't resolve 'core-js/modules/es6.array.fill' in '/Users/shinozaki/src/github.com/shinoshu/google-analytics-for-firebase/node_modules/vuetify/lib/util'
 @ ./node_modules/vuetify/lib/util/helpers.js 3:0-40
 @ ./node_modules/vuetify/lib/components/VList/index.js
 @ ./layouts/default.vue
 @ ./.nuxt/App.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi ./.nuxt/client.js

# 省略

ERROR in ./node_modules/vuetify/lib/util/colorUtils.js
Module not found: Error: Can't resolve 'core-js/modules/web.dom.iterable' in '/Users/shinozaki/src/github.com/shinoshu/google-analytics-for-firebase/node_modules/vuetify/lib/util'
 @ ./node_modules/vuetify/lib/util/colorUtils.js 3:0-42
 @ ./node_modules/vuetify/lib/services/theme/utils.js
 @ ./node_modules/vuetify/lib/services/theme/index.js
 @ ./node_modules/vuetify/lib/services/index.js
 @ ./node_modules/vuetify/lib/framework.js
 @ ./.nuxt/vuetify/plugin.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi ./.nuxt/client.js

原因

The problem is nuxt/@nuxt/babel-preset-app is not able to locate the right version of core-js when there are multiple versions of core-js in node_modules, which is a common situation in the npm ecosystem. If anything, it is something nuxt should address.

問題はnuxt / @ nuxt / babel-preset-appが、node_modulesに複数のバージョンのcore-jsがある場合に正しいバージョンのcore-jsを見つけられないことです。これは、npmエコシステムの一般的な状況です。どちらかと言えば、それはnuxtが対処すべきものです。

解決方法

方法１

core-js ver.2 を使う方法

$ npm i -D core-js@2

$ yarn add -D core-js@2

方法２

core-js ver.3 を使う方法

こちらは公式サイトに詳しくやり方が記載されていますので、ご参照ください。