Vue

【Vue】Failed to mount component: template or render function not defined.の対処

Vueのエラーメモ


目次[非表示]

Failed to mount component: template or render function not defined.

VueRouterを使用したところ「Failed to mount component: template or render function not defined.」というエラーが出ました。

app.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import Vue from 'vue'
import Router from 'vue-router'
 
Vue.use(Router)
 
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: require('../components/HelloWorld.vue')
    }
  ]
})

原因

vue-loderのバージョン13以上になるとこのエラーが出るようです。

Release v13.0.0 · vuejs/vue-loader


対処法

対処法はこちらに記載がありました。

下記に記載する3パターンのいずれでもエラーを回避出来ます。


requireのところで「default」を付ける

app.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import Vue from 'vue'
import Router from 'vue-router'
 
Vue.use(Router)
 
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: require('../components/HelloWorld.vue').default
    }
  ]
})

アロー関数を使用する。

app.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import Vue from 'vue'
import Router from 'vue-router'
 
Vue.use(Router)
 
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: () => import('../components/HelloWorld.vue')
    }
  ]
})

importをする

app.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import Vue from 'vue'
import Router from 'vue-router'
 
Vue.use(Router)
 
import helloWorld from './components/HelloWorld.vue';
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: helloWorld
    }
  ]
})

0 件のコメント :

コメントを投稿