Popover Uncaught (in promise) TypeError: Cannot read property '__props' of undefined

runtime-core.esm-bundler.js?5c40:1667 Uncaught (in promise) TypeError: Cannot read property '__props' of undefined
    at normalizePropsOptions (runtime-core.esm-bundler.js?5c40:1667)
    at extendProps (runtime-core.esm-bundler.js?5c40:1678)
    at Array.forEach (<anonymous>)
    at normalizePropsOptions (runtime-core.esm-bundler.js?5c40:1690)
    at createComponentInstance (runtime-core.esm-bundler.js?5c40:6309)
    at mountComponent (runtime-core.esm-bundler.js?5c40:4102)
    at processComponent (runtime-core.esm-bundler.js?5c40:4094)
    at patch (runtime-core.esm-bundler.js?5c40:3712)
    at mountChildren (runtime-core.esm-bundler.js?5c40:3894)
    at mount (runtime-core.esm-bundler.js?5c40:4968)

I get that error when i use a popover in two differents modal components, but when i use it in only 1, i dont get error:

Modal 1:

export default defineComponent({

    name: 'addArticleModal',

    methods: {

        async openPopover(e) {

            const popover = await popoverController

            .create({

                component: formActions,

                componentProps: { list: 'metadata' },

                event: e,

                translucent: true

            })

            return popover.present();

        },
....

Modal 2:

export default defineComponent({

    name: 'articleUnitsModal',

    methods: {
        async openPopoverUnits(e) {

            const popover = await popoverController

            .create({

                component: formActions,

                componentProps: { list: 'articleUnitsModal' },

                event: e,

                translucent: true

            })

            await popover.present();

        },
....

(Modal 2 is called in modal 1 by a button, using a mixin for calling the modals.)

formActions.vue

<template>
...
</template>

<script>


import { defineComponent } from 'vue';

import { modalMixin } from '@/components/mixins/modalMixin'

export default defineComponent({

    name: 'formActions',

    mixins: [ modalMixin ],

    props: {

        list: {

            type: String,

            default: ''

        }

    }

});

</script>

My dependencies:

"@ionic/vue": "^5.6.0-dev.202102221703.5300dcc",
"@ionic/vue-router": "^5.6.0-dev.202102221703.5300dcc",
"vue": "^3.0.0-0",
"vue-router": "^4.0.0-0",
"vuex": "^4.0.0-rc.2",

Thanks.

Can you reproduce this in a GitHub repo and post a link to it here?

You might want to first dismiss the old popover before re-initiating it… I have had almost the same issue with alert and then all it took was this sequence

  1. alert1.present()
  2. alert1.dissmiss()
  3. alert2.present()
  4. alert2.dismiss()

You see it is an async fn() and you are only calling present and never disposing of it and on top of that, the present() is awaited thus when you call the 2nd one you basically have an old instance running where the new props are not available…