question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:3
  • Comments:7 (2 by maintainers)

github_iconTop GitHub Comments

2reactions
liamdebeasicommented, Sep 24, 2020

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

1reaction
aaronksaunderscommented, Sep 26, 2020

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

@ionic/core | Yarn - Package Manager
Ionic is an open source app development toolkit for building modern, fast, top-quality cross-platform native and Progressive Web Apps from a single codebase ......
Read more >
Ionic app freezes or stops working after popover and modal ...
Here I solved it closing the popover and using a timeout before opening the modal, look $scope.openModal = function(){ if(!$scope.modal) ...
Read more >
Close a specific modal, is there a modal `id`? - Ionic Vue
I have seen some old answers mentioning a modal id property but I cannot find anything about it in the docs. There is...
Read more >
signature=4c44794979d36c3b2c6e1161877175aa,ionic-framework ...
Bug Fixes. button: allow any element type to use the "icon-only" slot (#22168) (c454c84). datetime: do not set ampm when the column doesn't...
Read more >
Using Ionic 4 in Vue applications with BEEP - Modus Create
Integrating Ionic APIs and delegating navigation to Vue Router was instrumental in getting advanced components such as Modals, Menus, ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found