UdemyのVue.jsの動画(Vue.js + Firebaseで作るシングルページアプリケーション)を見ながら勉強していて
最新版使っていたらvuetify入れるだけでエラーはいたので記録として
出たエラー
Module build failed (from ./node_modules/sass-loader/dist/cjs.js): ValidationError: Invalid options object. Sass Loader has been initialised using an options object that does not match the API schema.
実施手順
エラーになった時の手順は下記の通りです
node -v
v12.7.0
npm -v
6.10.2
vue -V
3.12.0
vue create sample
vue add vuetify
>Default
npm run serve
# ここでエラー
~中略~
"dependencies": {
"core-js": "^2.6.5",
"register-service-worker": "^1.6.2",
"vue": "^2.6.10",
"vue-router": "^3.0.3",
"vuetify": "^2.1.0",
"vuex": "^3.0.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.12.0",
"@vue/cli-plugin-eslint": "^3.12.0",
"@vue/cli-plugin-pwa": "^3.12.0",
"@vue/cli-service": "^3.12.0",
"babel-eslint": "^10.0.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"sass": "^1.19.0",
"sass-loader": "^8.0.0",
"vue-cli-plugin-vuetify": "^1.0.1",
"vue-template-compiler": "^2.6.10",
"vuetify-loader": "^1.2.2"
}
飛ばしてて気づくまでかかったのですが
vue add vuetifyしてDefaultを選択した際警告が出てました
? Choose a preset: Default (recommended)
WARN conflicting versions for project dependency "sass-loader":
- ^8.0.0 injected by generator "undefined"
- ^7.1.0 injected by generator "vue-cli-plugin-vuetify"
Using newer version (^8.0.0), but this may cause build errors.
package.jsonのsass-loaderを7.1.0にし、再度npm run serveするも
下記のようにドカドカとモジュールいれろとでてきたので、出たメッセージコピーして見るも失敗
To install them, you can run:npm install --save
core-js/modules/es6.array.fill
core-js/modules/es6.array.find
core-js/modules/es6.array.find-index
core-js/modules/es6.array.from
core-js/modules/es6.array.sort
core-js/modules/es6.function.name
core-js/modules/es6.map
core-js/modules/es6.math.cbrt
core-js/modules/es6.math.sign
core-js/modules/es6.number.constructor
core-js/modules/es6.number.max-safe-integer
core-js/modules/es6.object.freeze
core-js/modules/es6.object.is-extensible
core-js/modules/es6.object.keys
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.set
core-js/modules/es6.string.anchor
core-js/modules/es6.string.ends-with
core-js/modules/es6.string.fixed
core-js/modules/es6.string.includes
core-js/modules/es6.string.iterator
core-js/modules/es6.string.link
core-js/modules/es6.string.repeat
core-js/modules/es6.string.small
core-js/modules/es6.string.starts-with
core-js/modules/es6.string.sub
core-js/modules/es6.symbol
core-js/modules/es7.array.includes
core-js/modules/es7.object.get-own-property-descriptors
core-js/modules/es7.object.values
core-js/modules/es7.string.pad-start
core-js/modules/es7.symbol.async-iterator
core-js/modules/web.dom.iterable
結局最新のcore-jsを入れてやることで解決
npm install --save core-js
ブログ始めました