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.

useModal.tsx:

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({
            component,
            componentProps: props,
            cssClass: fullscreen ? 'full-screen-modal' : '',
        });

        await modal.present();

        return modal;
    }

    return (
        <ModalContext.Provider value={createModal}>
            {children}
        </ModalContext.Provider>
    );
};


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

export default useModal;

Another component:

const createModal = useModal();
// ......
// ......
const modal = await createModal(
            SomeComponent,
            someProps
        );

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!

1 post - 1 participant

Read full topic