よろしくお願いします。
(環境)
OS: Windows10
node: v12.13.0
npm: 6.12.0
vueCli: 4.5.13 (2.6.12)
(解決したいこと)
「Syntax Error: TypeError: this.getOptions is not a function 」を解決したいです。
(経緯)
ある書籍のソースを実行しようと試しています。しかしnpm run serveで実行すると上記エラーになります。
調べると割とよくあるエラーのようですが、node-sass、loader-sassはインストール済みで、
@マークでバージョン指定はしていないので最新のものを入れています。
冗長ですがソースも下記に掲載いたします。
ソースのタイポやモジュールの未インストールも疑いましたが問題らしいものは有りませんでした。
何かお心当たりある方、参考URLでもどんなことでも結構です。ご助言、ご教授頂けると幸いです。
よろしくお願いいたします。
(エラー)
INFO Starting development server... 98% after emitting CopyPlugin ERROR Failed to compile with 1 error 23:15:26 error in ./src/components/Counter.vue?vue&type=style&index=0&id=274929fc&lang=sass&scoped=true& Syntax Error: TypeError: this.getOptions is not a function @ ./node_modules/vue-style-loader??ref--9-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--9-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Counter.vue?vue&type=style&index=0&id=274929fc&lang=sass&scoped=true& 4:14-462 15:3-20:5 16:22-470 @ ./src/components/Counter.vue?vue&type=style&index=0&id=274929fc&lang=sass&scoped=true& @ ./src/components/Counter.vue @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=js& @ ./src/App.vue?vue&type=script&lang=js& @ ./src/App.vue @ ./src/main.js @ multi (webpack)-dev-server/client?http://192.168.16.7:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
(ソース)
vue createでパッケージ作成。編集したソースはapp.vue、新規作成はCounter.vueの2点のみです。
・src/App.vue
vue
1<template> 2 <div id="app"> 3 <img alt="Vue logo" src="./assets/logo.png"> 4 <HelloWorld msg="Welcome to Your Vue.js App"/> 5 <Counter name="Counter1" :initCount="5" /> 6 <Counter name="Counter2" :initCount="10" /> 7 </div> 8</template> 9 10<script> 11import HelloWorld from './components/HelloWorld.vue' 12import Counter from './components/Counter.vue' 13 14export default { 15 name: 'App', 16 components: { 17 HelloWorld, 18 Counter 19 } 20} 21</script> 22 23<style> 24#app { 25 font-family: Avenir, Helvetica, Arial, sans-serif; 26 -webkit-font-smoothing: antialiased; 27 -moz-osx-font-smoothing: grayscale; 28 text-align: center; 29 color: #2c3e50; 30 margin-top: 60px; 31} 32</style> 33
・src/components/Counter.vue
vue
1<template> 2<div class="counter"> 3<p>{{ name }}</p> 4<p>Count: {{ count }}</p> 5<button @click="increment">+1</button> 6</div> 7</template> 8 9 10<script> 11export default { 12 props: { 13 name: String, 14 initCount: Number 15 }, 16 data() { 17 return { 18 count: this.initCount 19 } 20 }, 21 methods: { 22 increment(){ 23 this.count++; 24 } 25 } 26} 27</script> 28 29<style lang="sass" scoped> 30.counter{ 31 width: 200px; 32 } 33</style> 34
package.json
json
1{ 2 "name": "softdesign", 3 "version": "0.1.0", 4 "private": true, 5 "scripts": { 6 "serve": "vue-cli-service serve", 7 "build": "vue-cli-service build", 8 "lint": "vue-cli-service lint" 9 }, 10 "dependencies": { 11 "core-js": "^3.6.5", 12 "node-sass": "^6.0.0", 13 "sass-loader": "^11.1.1", 14 "vue": "^2.6.11", 15 "yarn": "^1.22.10" 16 }, 17 "devDependencies": { 18 "@vue/cli-plugin-babel": "~4.5.0", 19 "@vue/cli-plugin-eslint": "~4.5.0", 20 "@vue/cli-service": "~4.5.0", 21 "babel-eslint": "^10.1.0", 22 "eslint": "^6.7.2", 23 "eslint-plugin-vue": "^6.2.2", 24 "vue-template-compiler": "^2.6.11" 25 }, 26 "eslintConfig": { 27 "root": true, 28 "env": { 29 "node": true 30 }, 31 "extends": [ 32 "plugin:vue/essential", 33 "eslint:recommended" 34 ], 35 "parserOptions": { 36 "parser": "babel-eslint" 37 }, 38 "rules": {} 39 }, 40 "browserslist": [ 41 "> 1%", 42 "last 2 versions", 43 "not dead" 44 ] 45} 46
あなたの回答
tips
プレビュー