Unknown custom element warning with recursive components, babel

Version

2.5.2

Reproduction link

https://github.com/adam-cowley/nestedtest

Steps to reproduce

The repo is based on the webpack template. Run npm run dev to start the project.

What is expected?

I am attempting to reuse components in a nested pattern. The EntityComponent should render a RelationshipComponent which should in turn render an EntityComponent.

What is actually happening?

Although each component is defined with a name property, I receive the following warning in the console and nothing rendered on the page.

Unknown custom element: <EntityComponent> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

If I make a change to the EntityComponent file, it will hot swap in the component which will render without a warning.

I’ve tried in vain to set keys and a name property on the child element and rename the element. Attempting to alias the component name has also proved unsuccessful.

Removing the component means the rest of the component appears correctly.

---

This is a barebones reproduction but the final version uses vuex for state management. Each child component has a reference property passed through it, then a getter is used to pull the information for that specific reference from an array in the store. Using ‘v-for’ on a div will list the relevant array entries so this part works. It seems that the name property is being ignored for the nested component.

I’m struggling to find any documentation on this - possibly due to using the wrong keywords? I’m happy to write a blog post if/when this gets resolved to give others a helping hand.

[posva]

I cannot test right now, but have you seen: https://vuejs.org/v2/guide/components.html#Circular-References-Between-Components?

[adam-cowley]

Yep, I’ve defined that in the export for both files

export default {
    name: 'EntityComponent',
    components: {
        RelationshipComponent,
    },
    props: {
        name: String,
        children: Array,
    },
}

https://github.com/adam-cowley/nestedtest/blob/master/src/components/EntityComponent.vue#L16

Using name as a prop could be a little confusing, apologies for that. I also tried it as a prop in the original project out of sheer desperation.