ホーム > Vue > '$createElement' of undefinedを解決する方法【Vue Router】
Vue

'$createElement' of undefinedを解決する方法【Vue Router】

いつもご利用ありがとうございます。
この記事には広告が掲載されており、その広告費によって運営しています。

目次

  1. 自分の解決事例
  2. その他のエラー文
  3. Vue Router の書き方
  4. まとめ
PR

今回解決するエラー文：

Vue router : TypeError: Cannot read property '$createElement' of undefined

というエラーが出た時の解決方法や考え方についてまとめています。

自分の解決事例

Router ファイルにタイピングミスがあった際にこのエラーが発生しました。

ミスの例

const routes = [
  {
    path: '/home',
    components: HomeComponent, //ここがエラー原因
    name: 'home'
  },
}

本来、componentと書かなければならないところを、components と書いていたことが原因でした。

正しい例

以下に修正後直りました。

const routes = [
  {
    path: '/home',
    component: HomeComponent, //修正
    name: 'home'
  },
}

その他のエラー文

Uncaught Error: [vue-router] "path" is required in a route configuration.

pathの部分を間違えた結果、上記のエラーになりました。

  {
    patha: "/home",
    component: HomeComponent,
    name: "home",
  },

[vue-router] Route with name 'home' does not exist

nameの部分を間違えると、上記のエラーになりました。

  {
    path: "/home",
    component: HomeComponent,
    namea: "home",
  },

Vue Router の書き方

import { createMemoryHistory, createRouter } from "vue-router"

import HomeView from "./HomeView.vue"
import AboutView from "./AboutView.vue"

const routes = [
  { path: "/", component: HomeView },
  { path: "/about", component: AboutView },
]

const router = createRouter({
  history: createMemoryHistory(),
  routes,
})

Vue Router - Getting Started

まとめ

直感的に分からないエラー文だったので苦戦しましたが、タイピングミスを疑ってみてください。

フィードバックのお願い
この記事のフィードバックがありましたらYoutubeの適当な動画にコメントしていただいたり、お問い合わせからご連絡ください。