For some reason, I keep getting this issue with inertia modals, Could not find a declaration file for module 'momentum-modal'. Any clue?
Regards,
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.
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.
Really strange! I'll whip up a fresh project and follow this through, and I'll get back to you soon :)
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
?
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.
Ahh got it, so everything is still working, you’re just seeing the error in VSCode?
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.
Ah so annoying. Do you have a repo I could clone? Would be more than happy to take a look on my machine!
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!
Oh no worries, just glad you’ve found the issue!
Good luck with the rest of your project :)