Vue: Recursive single file components' rendering functions are not defined

[scaccogatto]

Vue.js version

2.0.2

Reproduction Link

https://github.com/MarcoBoffo/vue-test-render-bug

Steps to reproduce

Run the build and check the browser's console log

What is Expected?

Blocks should render normally or, at least, give another warn

What is actually happening?

Vue says the template or render function is not defined

vue.common.js?e881:2611[Vue warn]: Failed to mount component: template or render function not defined. (found in component <block>)

[yyx990803]

This is due to the nature of cyclic dependencies in a module system. When DiagramPath imports Block, Block hasn't finished evaluating yet (because it in turn depends on DiagramPath), so it gets an empty object instead.

What you can do is using a dynamic require() to lazy-load Block in DiagramPath:

export default {
  beforeCreate () {
    this.$options.components.Block = require('./Block.vue')
  }
}

[scaccogatto]

Wouldn't it be nice if we just put this note here?
https://vuejs.org/v2/guide/components.html#Recursive-Component