Nested components in Vue.js: Failed to mount component: template or render function not defined

Question

I'm using Vue-CLI and getting this error. It's found in the <comment> component.

When the CommentForm's submitComment() method fires and adds the comment object to selfComments to be rendered out, the error occurs. It might be because they reference each other or something, but I'm not sure.

I've attempted to include only relevant information:

Edit: I think it's related to this: https://forum.vuejs.org/t/how-to-have-indirectly-self-nested-components-in-vue-js-2/1931

CommentForm.vue

<template>
   ...
        <ul class="self-comments">
            <li is="comment" v-for="comment in selfComments" :data="comment"></li>
        </ul>
   ...
</template>

<script>    
import Comment from 'components/Comment'

export default {
    name: 'comment-form',
    components: {
        Comment
    },
    props: ['topLevel', 'replyTo', 'parentId'],
    data() {
        return {
            text: '',
            postingStatus: 'Post',
            error: false,
            selfComments: []
        }
    },
    methods: {
        submitComment() {
            ...
        }
    }
}
</script>

<style scoped lang="scss">
...
</style>

Comment.vue

<template>
       ...
             <comment-form v-if="replyFormOpen" :top-level="false" :reply-to="data.username" :parent-id="data.id"></comment-form>

             <!-- recursive children... -->
             <ul>
                 <li is="comment" @delete="numComments -= 1" v-for="comment in data.children" :data="comment"></li>
             </ul>

       ...
</template>

** importing CommentForm here seems to cause the issue

<script>
import CommentForm from 'components/CommentForm'

export default {
    name: 'comment',
    components: {
        CommentForm
    },
    props: ['data'],
    data() {
        return {
            deleteStatus: 'Delete',
            deleted: false,
            error: false,
            replyFormOpen: false
        }
    },
    methods: {
        ...
    }
}
</script>

<style scoped lang="scss">
...
</style>

Any ideas?

Answer 1

I think you're running into this issue: Circular References between Components.

In your CommentForm component, try registering the Comment component during the beforeCreate() event. This will help Vue figure out the correct order in which to resolve the components.

<script>
export default {
    name: 'comment-form',
    props: ['topLevel', 'replyTo', 'parentId'],
    data() {
        return {
            text: '',
            postingStatus: 'Post',
            error: false,
            selfComments: []
        }
    },
    methods: {
        submitComment() {
            ...
        }
    },
    beforeCreate() {
        // register the Comment component here!!!!
        this.$options.components.Comment = require('components/Comment.vue');
   }
}
</script>