Vue.jsを開発で使うことがありますが、
予期せぬエラーで数時間溶かすことがあります。
ハマって数時間を溶かしてしまったにも関わらず、気づくとすぐ直った凡ミスについて紹介します。
同じ犠牲者を出さないためにも。
居ないかもしれませんが。
TypeError: ~~~~ is not a function
メソッドはちゃんと定義しているのに、無いと怒られます。
例えばこんな感じに書いていました。
sample1.vue
<script>
export default {
created() {
this.sampleFunc();
}
method: {
sampleFunc() {
console.log('sample code.');
}
}
}
</script>
sampleFuncはしっかり定義しているのに何故か定義されてない、と怒られます。
慣れている方ならすぐ分かりますね。
メソッドを定義はmethodではなくmethodsという場所に記載します。
というわけで、修正します。一瞬です。
sample1.vue(修正)
<script>
export default {
created() {
this.sampleFunc();
}
methods: { // 修正
sampleFunc() {
console.log('sample code.');
}
}
}
</script>
Invalid component name: "0".
コンポーネント名「0」は無効。
初見でまったく意味不明です。
もちろんそんなふざけた名前のコンポーネントなんか登録していません。
こんな感じのコードです。
sample2.vue
<script>
import StatsCard from '@/components/Cards/StatsCard';
export default {
components: [
StatsCard,
]
}
// (省略)
</script>
これはダメダメですね。
componentsのところが配列になっています。
コンポーネントのローカル登録はオブジェクトで登録しないといけません。
修正します。
sample2.vue(修正)
<script>
import StatsCard from '@/components/Cards/StatsCard';
export default {
// オブジェクトに
components: {
StatsCard,
}
}
// (省略)
</script>
This relative module was not found:
これはビルド時にエラーが発生しました。
ERROR Failed to compile with 1 errors
This relative module was not found:
...
* ./Sample.vue?vue&type=style&index=0&id=0dd86077&lang=scss&scoped=true& in ./components/Sample.vue
» Updated components\Sample.vue
単純にsassがインストールされてなかったのが原因だったようです。
インストール実行してあげて完了です。
$ npm install sass-loader node-sass
or
$ yarn add --dev sass
まとめ
凡ミスで時間を溶かす人が減ることを願います。