環境構築などは、本質的でないので省きます。
私は、create-nuxt-appでやってます。
Nuxtでstorybookなどをインストールすると依存関係などでcore-jsが勝手にアップデートされてversionが3になったせいでエラーが以下のような出ることがある。
ERROR Failed to compile with 56 errors friendly-errors 11:07:23
These dependencies were not found: friendly-errors 11:07:23
friendly-errors 11:07:23
* core-js/modules/es6.array.find in ./.nuxt/client.js friendly-errors 11:07:23
* core-js/modules/es6.array.from in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js friendly-errors 11:07:23
* core-js/modules/es6.array.iterator in ./.nuxt/client.js friendly-errors 11:07:23
* core-js/modules/es6.date.to-string in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js and 4 others friendly-errors 11:07:23
* core-js/modules/es6.function.name in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js and 1 other friendly-errors 11:07:23
* core-js/modules/es6.object.assign in ./.nuxt/client.js friendly-errors 11:07:23
* core-js/modules/es6.object.keys in ./.nuxt/client.js friendly-errors 11:07:23
* core-js/modules/es6.object.to-string in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js and 5 others friendly-errors 11:07:23
* core-js/modules/es6.promise in ./.nuxt/client.js friendly-errors 11:07:23
* core-js/modules/es6.reflect.construct in ./node_modules/babel-loader/lib??ref--13-0!./node_modules/ts-loader??ref--13-1!./node_modules/vue-loader/lib??vue-loader-options!./src/components/ReloadButton.vue?vue&type=script&lang=ts&, ./node_modules/babel-loader/lib??ref--13-0!./node_modules/ts-loader??ref--13-1!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Dialogs/BillDetail.vue?vue&type=script&lang=ts& and 2 others
* core-js/modules/es6.regexp.constructor in ./.nuxt/utils.js friendly-errors 11:07:23
* core-js/modules/es6.regexp.match in ./.nuxt/client.js friendly-errors 11:07:23
* core-js/modules/es6.regexp.replace in ./.nuxt/utils.js, ./.nuxt/components/nuxt.js friendly-errors 11:07:23
* core-js/modules/es6.regexp.search in ./.nuxt/utils.js friendly-errors 11:07:23
* 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 and 4 others friendly-errors 11:07:23
* core-js/modules/es6.string.includes in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js friendly-errors 11:07:23
* core-js/modules/es6.string.iterator in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js friendly-errors 11:07:23
* core-js/modules/es6.string.repeat in ./.nuxt/utils.js friendly-errors 11:07:23
* core-js/modules/es6.string.starts-with in ./.nuxt/utils.js friendly-errors 11:07:23
* core-js/modules/es6.symbol in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js friendly-errors 11:07:23
* core-js/modules/es7.array.includes in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js friendly-errors 11:07:23
* core-js/modules/es7.object.get-own-property-descriptors in ./.nuxt/index.js friendly-errors 11:07:23
* core-js/modules/es7.promise.finally in ./.nuxt/client.js friendly-errors 11:07:23
* core-js/modules/es7.symbol.async-iterator in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js friendly-errors 11:07:23
* core-js/modules/web.dom.iterable in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js friendly-errors 11:07:23
friendly-errors 11:07:24
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.reflect.construct 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
デフォルトだと現状core-jsのversion3には対応できないっぽい。
core-jsを2.6などに落として解決する方法もありますが、それだといずれどこかでまたエラーが出そう...。
そこでbabelを使うことで対応できたので書いておきます。
Nuxtのcore-jsのversion3の対応方法
まずは、babelをインストール
yarn add -D @babel/preset-env core-js@3
次にnuxt-config.ts
export default {
// ...
build: {
babel: {
presets: [
[
'@babel/preset-env',
{
targets: {
ie: '11'
},
useBuiltIns: 'usage',
corejs: 3
}
]
]
},
// ...
}
}
以下の記述で対応できたのでcore-js周辺で悩んだ人はやってみてもいいかも。