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…

1 Like

Sorry i still cant get a solution, i made this repo and you will see that when you uncomment line 13 and 18 you get that error and popovers stop working everywhere:

ionicpopovers/formActions.vue at 11821fba4bef535d389425480085543925063d94 · Yonier/ionicpopovers · GitHub

but when removing those lines the popovers works well but i need to use my ‘modalMixin’ to call another modal…

Thanks for helping!

the only solution i had with this is that you cannot use mixins with modalControllers, so i had to rewrite the modal instance in each component I want to call.