render funciton missing when using av-ts with Vue-Router

[akkinenirajesh]

Vue.js version

2.0.2

Reproduction Link

https://github.com/akkinenirajesh/vuebug-withrouter

Steps to reproduce

npm install
npm run dev

What is Expected?

We should see "It worked" in browser

What is actually happening?

We will get warning in browser console.
When ''' Vue.use(VueRouter) ''' line in main.ts is commented then the code will work.

But if we uncomment that line this project does not work. We will get an error in browser console. ''' [Vue warn]: Failed to mount component: template or render function not defined. (found in component ) '''

Problem is in resolveConstructorOptions method. When vue-loader with av-ts is used, component is created in .ts file using Vue.extend({}) and render function is added to the object by vue-loader after the component is created. So render function is not part of extendOptions.

When Vue-Router is used suprtOptions are being changed and the logic in resolveConstructorOptions completely ignores the options when that happens.

I believe that options must be merged with extendOption or some thing has to be done, so that we still get the render function which is added by vue-loader.

[fnlctrl]

You didn't create a router instance.
Please refer to the docs: http://router.vuejs.org/en/essentials/getting-started.html

[akkinenirajesh]

If I create router or not, should not effect vue instances that are created.
Vue.use(VueRouter) should not cause some other components to fail if router is not created.

Anyway I have created router and made the commit

It still does not work.

[fnlctrl]

Vue-loader doesn't support such usage:
https://github.com/akkinenirajesh/vuebug-withrouter/blob/master/Users.vue#L6-L8

<script>
    module.exports = require('./Users').default
</script>

Simply change it to

<script lang="ts" src="./Users.ts"></script>

And everything will work.

[akkinenirajesh]

That is great. Thanks for the suggestion. I made the changes.
https://github.com/akkinenirajesh/vuebug-withrouter/blob/master/Users.vue#L6
But still no luck.

[fnlctrl]

I've tested that fix here on my computer, and there wasn't the render funciton missing error anymore.. What problem are you still facing ?

[akkinenirajesh]

import * as Vue from 'vue'
import * as VueRouter from 'vue-router'
import * as Users from './Users.vue'

Vue.use(VueRouter) //commenting this will make it work
const routes = []
const router = new VueRouter({routes})
const app = new Vue({
  el: '#root',
  router,
  components: { Users },
  render: h => h('users')
})

Still same error
[Vue warn]: Failed to mount component: template or render function not defined.
(found in component )

Commenting Vue.use(VueRouter) makes the User component render properly.

[HerringtonDarkholme]

Can you try putting Vue.use(VueRouter) above the import statement?
I'm still investigating but this works for me.

minimal repro

import * as Vue from 'vue'
import * as VueRouter from 'vue-router'
var Users = Vue.extend({})
Users['options'].render = (h) => h('h1', 'hhhh')
Vue.use(VueRouter) // use here will break render

const app = new Vue({
  el: '#root',
  components: { Users: Users },
  render: h => h('users')
})

[akkinenirajesh]

Yes, putting Vue.use(VueRouter) above the import statement works.

[akkinenirajesh]

Can you refer to the point I mentioned about resolveConstructorOptions method in Vue code?
I think problem is there only. As we are adding render later, Vue is totally ignoring those options if superOptions changes.(that is what happens when we move Vue.use(VueRouter) after Component import.