Ionic-framework: @ionic/vue bug: modal and popover do not have framework delegate

[svenknobloch]

Bug Report

Ionic version:


[ ] 4.x
[x] 5.x

Current behavior:
Console throws exception when calling modal.present().

Uncaught (in promise) Error: framework delegate is missing
    at eval (framework-delegate-d1eb6504.js?b457:11)
    at step (tslib.es6.js?9ab4:100)
    at Object.eval [as next] (tslib.es6.js?9ab4:81)
    at eval (tslib.es6.js?9ab4:74)
    at new Promise (<anonymous>)
    at __awaiter (tslib.es6.js?9ab4:70)
    at attachComponent (framework-delegate-d1eb6504.js?b457:2)
    at class_1.eval (ion-modal.entry.js?1ad0:390)
    at step (tslib.es6.js?9ab4:100)
    at Object.eval [as next] (tslib.es6.js?9ab4:81)

Expected behavior:
Modal would present.

Steps to reproduce:

1. Create a fresh Ionic project using the new Vue beta.
2. Use the modalController to create a new modal.
3. Try to present the created modal

Related code:
Same as from the new Vue beta announcement post (see Other information).

<template>
  <ion-page>
    <ion-content>
      <ion-button @click="openModal()">Open Modal</ion-button>
    </ion-content>
  </ion-page>
</template>
<script>
import { IonButton, IonContent, IonPage, modalController } from '@ionic/vue';
import ModalExample from '@/components/Modal.vue';
export default {
  name: 'HomePage',
  components: { IonButton, IonContent, IonPage },
  setup() {
    const openModal = async () => {
      const modal = await modalController.create({
        component: ModalExample
      });
      await modal.present();
    }

    return { openModal }
  }
}
</script>

Other information:

Announcement Blog Post

Ionic info:

Ionic:

   Ionic CLI       : 6.11.8 (/Users/svenknobloch/.config/yarn/global/node_modules/@ionic/cli)
   Ionic Framework : @ionic/vue 0.3.1

Capacitor:

   Capacitor CLI   : 2.4.1
   @capacitor/core : 2.4.1

Utility:

   cordova-res                          : not installed
   native-run (update available: 1.1.0) : 0.3.0

System:

   NodeJS : v14.5.0 (/usr/local/Cellar/node/14.5.0/bin/node)
   npm    : 6.14.5
   OS     : macOS Mojave

[guizmo51]

I got the same issue.
I spent several hours to debug it. I thing it's triggered by the component. the controller (modal/popover) is not able to render HTML. A (bad) way to solve it quickly is to load your component in the page where you call the modal/popover, add a "ref" attribute on it and you can try to hide the component. If you retrieve the HTMLElement using the ref of your component, you add the HTMLElement instead of the component it will be ok. Very dirty but it works, I hope we will get an answer here :-)

[jnettome]

I have exactly the same issue here. Fresh project, starting to test the vue integration.
I gonna try @guizmo51 suggestion as a quick fix, but hope to see it working.

Thanks ionic-team for this release.

[liamdebeasi]

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic-framework/pull/22155, and a fix will be available in an upcoming release of Ionic Framework.

[liamdebeasi]

Hi everyone,

This fix has been released in Ionic Vue v0.5.0: https://github.com/ionic-team/ionic-framework/blob/ionic-vue/packages/vue/CHANGELOG.md#050

[aaronksaunders]

this appears to not be working when using the controller to render the modal. The modal is rendered but thecomponentProps are not coming through. I copied and pasted the code directly from the documentation

[Livijn]

Modal props doesn't propagate using modalController, however we can still use the <ion-modal> meanwhile. See: https://ionicframework.com/docs/api/modal#usage

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.