Silly Issue with momentum-modal

For some reason, I keep getting this issue with inertia modals, Could not find a declaration file for module 'momentum-modal'. Any clue?

Regards,

ms_dan Member
ms_dan
0
13
96
alex Member
alex
Moderator

Could you post the file/setup file where you're seeing this?

ms_dan Member
ms_dan
import './bootstrap'

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'
import { ZiggyVue } from 'ziggy-js'
import 'preline'
import { modal } from 'momentum-modal'
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers'

const appName = import.meta.env.VITE_APP_NAME

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: name => {
        const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
        return pages[`./Pages/${name}.vue`]
    },
    setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
        .use(plugin)
        .use(modal, {
            resolve: (name) => resolvePageComponent(`./Modals/${name}.vue`, import.meta.glob(`./Modals/**/*.vue`))
        })
        .use(ZiggyVue, Ziggy)
        .mount(el)
    },
    progress: {
        color: '#d90a2c',
        showSpinner: true,
    }
})

This is the app.js file, anywhere else I define import { Modal } from 'momentum-modal' eg. A component, I get the same thing.

alex Member
alex
Moderator

Since this is a TypeScript error, are you using TypeScript?

ms_dan Member
ms_dan

Nope, not at all, in fact, I am following your course on Inertia Fortify Package.

Edit: I tried starting a new project, still gets the same thing.

alex Member
alex
Moderator

Really strange! I'll whip up a fresh project and follow this through, and I'll get back to you soon :)

ms_dan Member
ms_dan

Appreciate it, looking forward for your response back :p.

alex Member
alex
Moderator

I just set up a fresh project with Laravel Breeze as the starter kit, installed momentum-modal and configured it within app.js like this, and it's all working.

import '../css/app.css';
import './bootstrap';

import { createInertiaApp } from '@inertiajs/vue3';
import { createApp, h } from 'vue';
import { ZiggyVue } from '../../vendor/tightenco/ziggy';
import { modal } from "momentum-modal"
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';

const appName = import.meta.env.VITE_APP_NAME || 'Laravel';

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) =>
        resolvePageComponent(
            `./Pages/${name}.vue`,
            import.meta.glob('./Pages/**/*.vue'),
        ),
    setup({ el, App, props, plugin }) {
        return createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(ZiggyVue)
            .use(modal, {
                resolve: (name) => resolvePageComponent(name, import.meta.glob("./Modals/**/*.vue")),
            })
            .mount(el);
    },
    progress: {
        color: '#4B5563',
    },
});

Is the error you're seeing when you try to run npm run dev?

ms_dan Member
ms_dan

No, I see the error on VSCode, it shows me 3 dots under "momentum-modal" and when I hover on it, it shows me that error.

alex Member
alex
Moderator

Ahh got it, so everything is still working, you’re just seeing the error in VSCode?

ms_dan Member
ms_dan

Nope, it doesn't work, I will check my code again just to make sure I have done nothing wrong, perhaps even clone the source code to test it locally, and I'll let you know.

alex Member
alex
Moderator

Ah so annoying. Do you have a repo I could clone? Would be more than happy to take a look on my machine!

ms_dan Member
ms_dan
Solution

Apparently it was a problem with headless ui, I just made a few mistakes there, my bad!

So it works now even though there's the three dots, which is quite weird. Appreciate the help and patience!

alex Member
alex
Moderator

Oh no worries, just glad you’ve found the issue!

Good luck with the rest of your project :)