josemariagomez / momentum-modal-react

MIT License
6 stars 2 forks source link

Resolver function inside a component not working #3

Open Kaishiyoku opened 1 month ago

Kaishiyoku commented 1 month ago

I used to use a global resolver which worked but it broke automatic module chunking when running npm run build (only one app.js file got generated with over than 500kb of size). So I thought to use a local resolver like this:

const resolver = (name: string) => {
    const modals = import.meta.glob('../Modals/**/*.tsx', {eager: true});

    return modals[`../Modals/${name}.tsx`];
};

export default function Authenticated({user, header, children}: PropsWithChildren<{
    user: User;
    header?: ReactNode;
}>) {
    return (
        <>
            <main className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8 pt-4">
                {children}
            </main>

            <Modal resolver={resolver}/>
        </>
    );
}

But when I visit a route with a modal I get this JavaScript error saying that there is no resolver function defined:

react-dom.development.js:22878 
 Uncaught Error: Resolver function not defined. You have to define it at Inertia's entrypoint.
    at Y (momentum-modal-react.js:654:13)
    at momentum-modal-react.js:666:5
    at commitHookEffectListMount (react-dom.development.js:23189:26)
    at commitPassiveMountOnFiber (react-dom.development.js:24965:13)
    at commitPassiveMountEffects_complete (react-dom.development.js:24930:9)
    at commitPassiveMountEffects_begin (react-dom.development.js:24917:7)
    at commitPassiveMountEffects (react-dom.development.js:24905:3)
    at flushPassiveEffectsImpl (react-dom.development.js:27078:3)
    at flushPassiveEffects (react-dom.development.js:27023:14)
    at react-dom.development.js:26808:9
Kaishiyoku commented 1 month ago

I could isolate the issue. It occurs when I disable eager loading for import.meta.glob imports. But that breaks Vite's chunking and results into a single app.js file on production.

Update: it still doesn't work though. As soon as I'm using a local resolve function it breaks.

Kaishiyoku commented 1 month ago

Quick update. I got it to work. The main issue was that I was using useModal inside my modal component without any resolver. But I have to use the hook to be able to get the show, hide and redirect variables. I also got it to work with import.meta.glob without setting eager to true. That way a Promise is being returned and I had to adjust the useModal hook accordingly. My fix is a little dirty though. I will try to deliver a better solution in a pull request soon if I don't forget :D