11
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

run serveしたらVuetifyでエラーが起きた

11
Last updated at Posted at 2019-10-12

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
# ここでエラー

package.json
~中略~

"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.jsonsass-loader7.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
スクリーンショット 2019-10-13 2.47.18.png

ブログ始めました

11
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?