I hope you are all well. I'm currently having some issues with using a ponent that is inside a parent ponent. I tried a few things but without success... The ponent ModalBoxActionArticle doesn't want to show and I have the following error message :

[Vue warn]: Failed to resolve ponent: ModalBoxActionArticle at at <Home onVnodeUnmounted=fn ref=Ref< undefined > > at at

Could you please help me with this? Thanks in advance for your time and help.

Find below the vue View that is at the root of these ponents:

<template>
  <div class="home">
      <ImageArticle class="home__ponent"/>
  </div>
</template>

<script>
import ImageArticle from "../ponents/imageArticle"

export default {
  name: 'Home',
  ponents: {
    ImageArticle,
  }
}
</script>

Find below the ImageArticle ponent (I removed the style)

<template>
    <div>
        <article class="postWithImage">
            <ModalBoxActionArticle/>
            <div class="postWithImage__1div">
                <picture class="postWithImage__pictureProfile">
                    <img class="postWithImage__imgProfile" src="../assets/EugenieProfile.jpeg" alt="photo de profile de la personne qui a publié l'image">
                </picture>
                .... here I removed some html to make it more readable ....

        </article>
    </div>
</template>

<script>
import ModalBoxActionArticle from '../ponents/modalBoxActionArticle'

export default {
    name: 'ImageArticle',
    ponent : {
        ModalBoxActionArticle
    },
    setup() {
        console.log('%c loading ImageArticle ponent', 'color:green');
        return {};
    },
}
</script>

Last but not least find below, the ponent ModalBoxActionArticle that is inside the ImageArticle ponent

<template>
    <div class="modal">
        <button class="modal__btt modal__btt--alert">Signaler</button>
        <button class="modal__btt">Partager</button>
        <button class="modal__btt">Modifier</button>
        <button class="modal__btt modal__btt--alert">Supprimer</button>
    </div>
</template>

<script>
export default {
    name: "ModalBoxActionArticle",
    setup() {
        console.log('%cloading ModalBoxActionArticle newest ponent', 'color:red');
        return {};
    },
}
</script>

I hope you are all well. I'm currently having some issues with using a ponent that is inside a parent ponent. I tried a few things but without success... The ponent ModalBoxActionArticle doesn't want to show and I have the following error message :

[Vue warn]: Failed to resolve ponent: ModalBoxActionArticle at at <Home onVnodeUnmounted=fn ref=Ref< undefined > > at at

Could you please help me with this? Thanks in advance for your time and help.

Find below the vue View that is at the root of these ponents:

<template>
  <div class="home">
      <ImageArticle class="home__ponent"/>
  </div>
</template>

<script>
import ImageArticle from "../ponents/imageArticle"

export default {
  name: 'Home',
  ponents: {
    ImageArticle,
  }
}
</script>

Find below the ImageArticle ponent (I removed the style)

<template>
    <div>
        <article class="postWithImage">
            <ModalBoxActionArticle/>
            <div class="postWithImage__1div">
                <picture class="postWithImage__pictureProfile">
                    <img class="postWithImage__imgProfile" src="../assets/EugenieProfile.jpeg" alt="photo de profile de la personne qui a publié l'image">
                </picture>
                .... here I removed some html to make it more readable ....

        </article>
    </div>
</template>

<script>
import ModalBoxActionArticle from '../ponents/modalBoxActionArticle'

export default {
    name: 'ImageArticle',
    ponent : {
        ModalBoxActionArticle
    },
    setup() {
        console.log('%c loading ImageArticle ponent', 'color:green');
        return {};
    },
}
</script>

Last but not least find below, the ponent ModalBoxActionArticle that is inside the ImageArticle ponent

<template>
    <div class="modal">
        <button class="modal__btt modal__btt--alert">Signaler</button>
        <button class="modal__btt">Partager</button>
        <button class="modal__btt">Modifier</button>
        <button class="modal__btt modal__btt--alert">Supprimer</button>
    </div>
</template>

<script>
export default {
    name: "ModalBoxActionArticle",
    setup() {
        console.log('%cloading ModalBoxActionArticle newest ponent', 'color:red');
        return {};
    },
}
</script>

• javascript
• vue.js
• vue-ponent

2 Answers 2

In ImageArticle.vue you have defined

ponent : {
   ModalBoxActionArticle
},

This must be like (the letter s must be at the end of the word ponent):

ponents : {
   ModalBoxActionArticle
},

In my case, this error occured because there was a typo in my ponent while importing!

import PropsPassingVue from './ponents/PropsPassing.vue';

It should be:

import PropsPassing from './ponents/PropsPassing.vue';

So make sure your ponent is spelled right!