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

[Dreampie]

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.)

[fnlctrl]

What is in your .component? Is it an alias of .vue?
And please specify the version of webpack and vue-loader you are using.

[Dreampie]

it is a js file

export default {
  name: 'About',
  template: require('./about.template'),
  style: require('./about.style'),
  data(){
    return {
      name: 'About'
    }
  }
}

https://github.com/Dreampie/resty-cms

dependencies

"dependencies": {
    "es6-promise": "^3.2.1",
    "vue": "^2.0.0-rc.5",
    "vuex": "^2.0.0-rc.5",
    "vue-router": "^2.0.0-rc.4"
  },
  "devDependencies": {
    "babel-core": "^6.14.0",
    "babel-loader": "^6.2.5",
    "babel-preset-es2015": "^6.14.0",
    "cross-env": "^2.0.1",
    "raw-loader": "^0.5.1",
    "file-loader": "^0.8.5",
    "html-loader": "^0.4.3",
    "html-webpack-plugin": "^2.16.0",
    "style-loader": "^0.13.1",
    "css-loader": "^0.23.1",
    "less": "^2.5.3",
    "less-loader": "^2.2.0",
    "url-loader": "^0.5.7",
    "webpack": "^1.13.0",
    "webpack-dev-server": "^1.14.1"
  }

[fnlctrl]

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"}
    ]

[Dreampie]

no.My filename is about.template.html

[fnlctrl]

I see... Since this is not related to vue-router, please check your webpack config and/or other related configs.

[fnlctrl]

@LinusBorg It would be very kind of you to help OP as to find out what's wrong in the configs, so I'll leave this issue as it is.

[LinusBorg]

Yeah _I'll try to look into it.

[LinusBorg]

@Dreampie I'm not sure weither it's releated, but the base: option should not be a file system path - it should be the root path relative to the URL.

http://yourapp.com/we-start-here/ => mode: '/we-start-here'

[LinusBorg]

Hm this is really weird. You even have an alias in your webpack config to properly load the standalone version, yet this error seems like its using the runtime-only (or maybe i'm mixing up similar error messages in my head).

This may take some work to track down (unless I find it to be a config problem after all) could be related to vue-loader or vue-router.

[Dreampie]

compile result:

var Home = function Home(resolve) {
      return __webpack_require__.e/* nsure */(1, resolve);
    };
    var About = function About(resolve) {
      return __webpack_require__.e/* nsure */(2, resolve);
    };

    exports.default = new _vueRouter2.default({
      mode: 'history',
      base: __dirname,
      routes: [{ path: '/', component: Home }, { path: '/about', component: About }, { path: '*', redirect: '/' }]
    });

[posva]

@Dreampie Shouldn't the about.component.html be about.vue instead?

[LinusBorg]

@posva

it's about.component.js which exports a component options object, inside of which je requires home.template.html

https://github.com/Dreampie/resty-cms/blob/master/src/component/home/home.component.js

This _should_ work as far as I can tell.

[posva]

Does it work by inlining that inside about.component.js? It may be a bug on webpack

[fnlctrl]

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)

to

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

[LinusBorg]

@fnlctrl shouldn't babel compile the ES6 export to commonjs module.exports syntax?

[fnlctrl]

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.

[Dantiff]

@fnlctrl the loaders[ ... ] option was a lifesaver. Just realised i was requiring template files which were not registered. I have been looking for that answer for days. now it works like magic for me.

Thanks :)

[oswaldofreitas]

Thank you @fnlctrl !!! Your solution solved my problem.