Failed to resolve component when not using hot reload

user_13483645 0
Viewed 577

I am facing a problem, I don't know if it is a vue bug or if there is something wrong in my code, but the issue is the following:
I have a Card component and when I try to access it from the Home component (The main page created when you create your project with the vue router) it works fine (the component shows up), but if I try to access it [The Cards component] from the Category component, it doesn't show up and I get this console output

[Vue warn]: Failed to resolve component: Cards 
  at <Category key=1 onChangeActive=fn<bound changeActive> onChangeContent=fn<bound changeContent>  ... > 
  at <Cards onChangeContent=fn<bound changeContent> onChangeActive=fn<bound changeActive> content= (3) [{…}, {…}, {…}] > 
  at <Home onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > > 
  at <RouterView> 
  at <App>

The strange part is that when I modify slightly (for example adding a comment) the Category.vue file and save, after the hot swap everything works fine (the Cards component shows up and there is no error in the console). But as soon as I reload the page it doesn't work anymore.

I am using vue 3 on Ubuntu 20.04, I have tried restarting the dev server as well as the entire computer and also removing the node-modules folder (and then reinstalling with npm install) but nothing helped. The build for production is also broken. My source code is available here
EDIT:
I have tried to install it on a raspberry pi but it didn't work either.

vuejs3 vue.js html javascript
1 Answers

The problem is due to the components that are recursively invoking themselves (Circular references)

In my case I had to go in Cards.vue and instead of importing the Category component like you would do normally

<script>
    import Category from './Category'
    export default{
        name: 'Cards',
        components:{
            Category,
        }
    }
</script>

You have to do this instead:

<script>
export default {
    name: 'Cards',
    components: {}, // You still need to create the components object
    beforeCreate() {
        this.$options.components.Category = require('./Category.vue').default;
    },
};
</script>
You can read more here:

Source: https://v2.vuejs.org/v2/guide/components-edge-cases.html#Circular-References-Between-Components

user_134836450
Related