Framework delegate missing when using modalController.create in React

Hello everyone.

I’ve been using the useIonModal hook everywhere in my app, and it works fine, but now I wanted to make my own modal hook, in order to know when the modal is displayed and when it is closed (onDidDismiss) outside of it.


import {createContext, useContext} from "react";
import {ComponentRef, modalController} from "@ionic/core";

type ModalContextModel = (
    component: ComponentRef,
    props: any,
    fullscreen?: boolean
) => Promise<HTMLIonModalElement>;

export const ModalContext = createContext({} as ModalContextModel);

export const ModalProvider = ({children}: any) => {
    async function createModal(
        component: ComponentRef,
        props: any,
        fullscreen: boolean = true
    ): Promise<HTMLIonModalElement> {
        const modal = await modalController.create({
            componentProps: props,
            cssClass: fullscreen ? 'full-screen-modal' : '',

        await modal.present();

        return modal;

    return (
        <ModalContext.Provider value={createModal}>

const useModal = () => {
    return useContext(ModalContext);

export default useModal;

Another component:

const createModal = useModal();
// ......
// ......
const modal = await createModal(

The error message:

Uncaught (in promise) Error: framework delegate is missing
    at attachComponent (framework-delegate.js:11:1)
    at Modal.present (ion-modal.js:812:1)
    at createModal (useModal.tsx:24:1)
    at async updateField (AnotherComponent.tsx:88:1)

I looked everywhere but could only find Angular examples on how this works.

Thanks for all the help!


Were you able to find the solution for this problem?

I seems to have the same problem using Vue3, but only occurs in production mode.

In my example, the modalController was imported from ionic core also. Therefore cannot be used to create modal, because the framework delegate (eg. vue or react specific code) was missing.

I needed to import it from ionic/vue to make it work.