I think this problem stems from a parent template having multiple children in Vue.js 3 with Vue Router 4. I never had this problem in prior version of both packages.

I have a simple App.vue file:

<template>
    <div id="app">
         <main id="content">
                    <div id="nav">
                        <!--<router-link to="/about">About</router-link>-->
                        <router-link to="/information">Information</router-link>
                        <router-link :to="{ path: '/create', name: 'PostCreate'}">Create</router-link>
                    </div>
                    <router-view></router-view>
         </main>
</template>

The router-link to="/information" link works fine. It just loads the view which has no other ponents inside it.

The other router-link :to="{ path: '/create', name: 'PostCreate'}" fails after repeatedly trying to load the ponent about 50 times and logs this in the console:

 [Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at /?repo=vuejs/vue-next 
  at <PostCreate> 
  at <PostCreate>  
  at <PostCreate>  
  ... // repeats over and over again until
  at <PostCreate onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > > 
  at <RouterView> 
  at <App> 
  at <App>

vuerouter.js

const routes = [
    {
        path: '/',
        name: 'HomeView',
        ponent: HomeView
    },
    {
        path: '/information',
        name: 'Information',
        ponent: () => import(/* webpackChunkName: "Information" */ '../views/information/Information.vue')
    }
    ,
    {
        path: '/create',
        name: 'PostCreate',
        ponent: () => import(/* webpackChunkName: "Create" */ '../views/posts/PostCreate.vue')
    }
];

The only difference between Information.vue and PostCreate.vue is that the latter imports another vue ponent to make a form for the user to create a post.

Information.vue

<template>
<div>
<p>I am full of good info</p>
</div>
</template>
<script>
    export default {
        name: 'Information'
    }
</script>

PostCreate.vue

<template>
    <div class="content">

            <h1>I make a form</h1>
            <Post-Create></Post-Create>

    </div>
</template>

<script>
    import PostCreate from "../../ponents/PostCreate.vue";

    export default {
        name: "PostCreate",
        ponents: {
            "Post-Create": PostCreate
        }
    }
</script>

Why is this an issue in Vue.js 3 with Vue-Router 4 whereas it worked fine previously? How do I solve it?

I think this problem stems from a parent template having multiple children in Vue.js 3 with Vue Router 4. I never had this problem in prior version of both packages.

I have a simple App.vue file:

<template>
    <div id="app">
         <main id="content">
                    <div id="nav">
                        <!--<router-link to="/about">About</router-link>-->
                        <router-link to="/information">Information</router-link>
                        <router-link :to="{ path: '/create', name: 'PostCreate'}">Create</router-link>
                    </div>
                    <router-view></router-view>
         </main>
</template>

The router-link to="/information" link works fine. It just loads the view which has no other ponents inside it.

The other router-link :to="{ path: '/create', name: 'PostCreate'}" fails after repeatedly trying to load the ponent about 50 times and logs this in the console:

 [Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs/?repo=vuejs/vue-next 
  at <PostCreate> 
  at <PostCreate>  
  at <PostCreate>  
  ... // repeats over and over again until
  at <PostCreate onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > > 
  at <RouterView> 
  at <App> 
  at <App>

vuerouter.js

const routes = [
    {
        path: '/',
        name: 'HomeView',
        ponent: HomeView
    },
    {
        path: '/information',
        name: 'Information',
        ponent: () => import(/* webpackChunkName: "Information" */ '../views/information/Information.vue')
    }
    ,
    {
        path: '/create',
        name: 'PostCreate',
        ponent: () => import(/* webpackChunkName: "Create" */ '../views/posts/PostCreate.vue')
    }
];

The only difference between Information.vue and PostCreate.vue is that the latter imports another vue ponent to make a form for the user to create a post.

Information.vue

<template>
<div>
<p>I am full of good info</p>
</div>
</template>
<script>
    export default {
        name: 'Information'
    }
</script>

PostCreate.vue

<template>
    <div class="content">

            <h1>I make a form</h1>
            <Post-Create></Post-Create>

    </div>
</template>

<script>
    import PostCreate from "../../ponents/PostCreate.vue";

    export default {
        name: "PostCreate",
        ponents: {
            "Post-Create": PostCreate
        }
    }
</script>

Why is this an issue in Vue.js 3 with Vue-Router 4 whereas it worked fine previously? How do I solve it?

• javascript
• vue.js
• vue-ponent
• vue-router
• vuejs3

• According to the error, "this is a Vue internals bug.". You should open a new issue at the given URL(IMHO) – shrihankp Commented Feb 27, 2021 at 2:21

1 Answer 1

This happens because the PostCreate view is trying to recursively load itself. Since you used the same name for the view and the child ponent, the parent name overwrites the child name in the registration, and the view tries to load itself instead of the child.

It's the equivalent of this, which would also lead to the view trying to load itself.

<template>
  <div class="content">
    <h1>I make a form</h1>
    <PostCreate></PostCreate>
  </div>
</template>

<script>
export default {
  name: "PostCreate",
};
</script>

^{You won't get a Failed to resolve ponent error, because it takes <PostCreate></PostCreate> to be itself. You get that same recursion error instead.}

So you just need to rename the child ponent. It's a good practice to always use different filenames too, for different ponents, especially in larger projects, to keep files clear.