タイトル: エラー一覧
SEOタイトル: Vue.js よくあるエラー集と対処完全ガイド
| この記事の要点 |
|
Vue.js でよく遭遇するエラー一覧
Vue 3 を中心に、開発で頻出するエラーと対処をまとめます。多くは Vue 2 にも当てはまります。
1. Failed to mount component
[Vue warn]: Failed to mount component: template or render function not defined.
[Vue warn]: Property "xxx" was accessed during render but is not defined on instance.原因と対処:
- SFC で
ブロック忘れ → 追加 defineComponent戻り値のtemplateプロパティが未定義 →renderまたはtemplate追加- 動的 import 失敗 → ファイルパス / 拡張子確認
- Volar / TypeScript 設定で SFC 認識不能 →
tsconfig.jsonのvueCompilerOptions確認
{{ msg }}
2. Cannot read properties of undefined (リアクティビティ)
TypeError: Cannot read properties of undefined (reading 'name')非同期データの初期値が未定義のままレンダリングされた典型例:
{{ user.name }}
{{ user.name }}
{{ user?.name }}
3. ref / reactive の誤用
import { ref, reactive } from 'vue'
// ❌ ref を渡されたつもりで生の値を扱う
const count = ref(0)
console.log(count + 1) // → "[object Object]1"
// ✅
console.log(count.value + 1)
// ❌ reactive オブジェクトを分割代入 → リアクティビティ消失
const state = reactive({ name: 'a' })
const { name } = state // 普通の文字列
name = 'b' // ❌ state.name は変わらず
// ✅ toRefs で個別 ref 化
import { toRefs } from 'vue'
const { name } = toRefs(state)
name.value = 'b' // ✅ state.name も更新
// ❌ reactive を再代入
let s = reactive({ a: 1 })
s = { a: 2 } // ❌ リアクティビティ切断
// ✅ プロパティを更新
s.a = 2
// または ref + .value で全置換
const sref = ref({ a: 1 })
sref.value = { a: 2 } // ✅4. v-model が動かない (カスタムコンポーネント)
Vue 3 の v-model は modelValue + update:modelValue イベント。
5. Vue 2 → 3 移行で消えた API
| Vue 2 | Vue 3 での扱い |
|---|---|
Vue.filter('xxx', fn) | 廃止。computed や methods で代替 |
Vue.prototype.$xxx | app.config.globalProperties.$xxx |
$listeners | $attrs に統合 |
v-on.native | 不要 (デフォルトでネイティブ) |
v-model.sync | v-model:xxx + 複数 v-model |
new Vue({...}) | createApp({...}).mount(...) |
| Functional Component | 関数で書くだけ (props 引数) |
Vue.set / Vue.delete | 不要 (Proxy ベースリアクティビティ) |
EventBus (new Vue()) | mitt 等の外部ライブラリ推奨 |
6. Vue Router の動的ルート
// Vue Router 4
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
history: createWebHistory(),
routes: [
{ path: '/users/:id', component: UserDetail },
{ path: '/users/:id(\\d+)', component: UserDetail }, // 数値のみ
{ path: '/files/:path(.*)*', component: FileView }, // catch-all
],
})
// 動的ルートで同じコンポーネントが再利用される
// → 同じコンポーネントだとライフサイクル発火しない
// 対処: route.params を watch
import { watch } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
watch(() => route.params.id, async (newId) => {
await loadUser(newId)
}, { immediate: true })
// or :key で強制再生成
// 7. Pinia (推奨ストア)
// store/counter.js
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'
export const useCounterStore = defineStore('counter', () => {
const count = ref(0)
const double = computed(() => count.value * 2)
function increment() {
count.value++
}
return { count, double, increment }
})
// コンポーネントから
8. Production 警告を抑制
// main.js
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
// 開発環境のみ警告ハンドラ
app.config.warnHandler = (msg, instance, trace) => {
if (msg.includes('Component name')) return // 特定警告を抑制
console.warn(msg, trace)
}
// 本番では Vue 自体が警告を出さない (vue.runtime.prod.js)
app.mount('#app')9. Vue DevTools 利用
- Chrome 拡張 / Firefox アドオン: 「Vue.js devtools」
- スタンドアロン版:
npm i -g @vue/devtools→vue-devtools起動 - コンポーネントツリー / Pinia ストア / イベント / Performance を可視化
- 本番ビルドでは無効化される。デバッグしたい場合は
__VUE_PROD_DEVTOOLS__ = true
10. Nuxt の Hydration mismatch
[Vue warn]: Hydration node mismatch:
- Client vnode: ...
- Server rendered DOM: ...
Hydration completed but contains mismatches.
原因: SSR と CSR で生成される DOM が異なる (時刻、Math.random、window 参照など)。
{{ new Date().toLocaleString() }}
{{ window.innerWidth }}
{{ new Date().toLocaleString() }}
FAQ
Q: watch が発火しない
A: ref なら watch(myRef, ...)、reactive 内プロパティは watch(() => state.x, ...) のように関数で。
Q: コンポーネントが再描画されない
A: リアクティビティ切断 (分割代入、再代入)。toRefs や ref 化で解決。
Q: provide / inject がアプリ全体で動かない
A: app.provide(key, value) をルートで設定。コンポーネント内 provide はサブツリーのみ有効。
Q: TypeScript で props の型が効かない
A: defineProps<{ id: number }>() でジェネリック指定。または defineProps({ id: { type: Number, required: true } })。