質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

Yarn

Yarnは、Facebook/Exponent/Google/Tildeが開発したJavaScriptのパッケージマネージャ。npmよりもインストールが速く、厳密にモジュールのバージョンを固定できるなど、npmの問題を解決。npmと互換性があり、同じpackage.jsonを使用できます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Q&A

0回答

1222閲覧

Syntax Error: TypeError: this.getOptions is not a function を解決したい

wkbiz

総合スコア152

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

Yarn

Yarnは、Facebook/Exponent/Google/Tildeが開発したJavaScriptのパッケージマネージャ。npmよりもインストールが速く、厳密にモジュールのバージョンを固定できるなど、npmの問題を解決。npmと互換性があり、同じpackage.jsonを使用できます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

0グッド

0クリップ

投稿2021/05/16 14:34

編集2021/05/16 14:37

よろしくお願いします。
(環境)
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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問