vue-router: Could not lazy loading component, import work fine

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter)

const Home = resolve => require(['./component/home/home.component'], resolve)
const About = resolve => require(['./component/about/about.component'], resolve)

export default new VueRouter({
  mode: 'history',
  base: __dirname,
  routes: [
    {path: '/', component: Home},
    {path: '/about', component: About},
    {path: '*', redirect: '/'}
  ]
})

error:

vue.js:2532 [Vue warn]: Failed to mount component: template or render function not defined. (found in anonymous component - use the "name" option for better debugging messages.)

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 18 (13 by maintainers)

Most upvoted comments

You used export default inside the component, which only works with import. When you require it, it will give you an object of {default: (your component)}

So change the lazy load from

const Home = resolve => require(['./component/home/home.component'], resolve)

const Home = resolve => require(['./component/home/home.component'], m => resolve(m.default));

fnlctrl on Sep 23, 2016

Yes and no. If you took a look at the compiled result, you would see something like exports.default = .... This is to distinguish ES6 export default from traditional CommonJS module.exports, using the older syntax exports of node. This was introduced in babel 6 if memory serves.

fnlctrl on Sep 23, 2016

You are requiring .template file which is not registered in your webpack config

loaders: [
      {test: /\.js$/, exclude: /(node_modules|dist)/, loader: "babel?presets[]=es2015"},
      {test: /\.css$/, loader: "style!css"},
      {test: /\.less$/, loader: "style!css!less"},
      {test: /\.html$/, loader: "html"},
      {test: /\.(eot|svg|ttf)$/, loader: "file"},
      {test: /\.(png|jpg|gif)$/, loader: "url"},
      {test: /\.woff2?$/, loader: "url?limit=10000&minetype=application/font-woff"}
    ]

fnlctrl on Sep 12, 2016