Vue

VueRouterで'$createElement' of undefinedを解決する方法

いつもご利用ありがとうございます。このブログは、広告費によって運営されています。

オススメ本
Web技術を勉強するなら、かなりオススメの雑誌です。毎月新しい発見があります。ついに最終号・・・、みなさん買いましょう!!
読んで損することはない名著。命名で悩むことが多い人はこの本がオススメです。

⇨ Laravel 記事の目次はこちら

Vue のルーティングを作成している際、

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

というエラーが発生しました。

普通に他のところは動いていたので、なんでやねんと思いましたがこのエラー表示が出る時はどこを見れば良いかまとめています。

⇨Vue+Vuetifyのオススメ動画教材

結論

Router ファイルにタイピングミスがある可能性が高いです。

僕の場合は、

const routes = [
  {
    path: '/home',
    //componentが正しい
    //components: HomeComponent,
    component: HomeComponent,
    name: 'home'
  },
}

このように、component と記載しなければならないところを、components と記載していたことによってエラーが出てしまいました。

試しに他もタイピングミスをしてみる

試しに path をタイピングミスしてみました。

const routes = [(patha: "/home")];
Uncaught Error: [vue-router] "path" is required in a route configuration.

と出ました。

どうやらエラー表示が違いそうです。

次に name をタイピングミスしてみます。

  {
    path: "/home",
    component: HomeComponent,
    namea: "home",
  },
[vue-router] Route with name 'home' does not exist

エラー表示が変わりました。

まとめ

おそらくこのエラー表示は、router の component 指定でタイピングミスをしている可能性が高みざわということが判明しました。

感想や記事の誤りについては Twitter から DM していただければと思います!

それでは!