visitInModal is not a function

[musichook]

trafficstars

Hi,

Thank you for this project

I'm trying to start use modals

But for <button @click="$inertia.visitInModal(route('backend.users.create'))">Load in modal</button>

I got the error:

runtime-core.esm-bundler.js?5c40:218 Uncaught TypeError: _ctx.$inertia.visitInModal is not a function
    at onClick._cache.<computed>._cache.<computed> (Users.vue?d53d:28:50)
    at callWithErrorHandling (runtime-core.esm-bundler.js?5c40:155:1)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js?5c40:164:1)
    at HTMLButtonElement.invoker (runtime-dom.esm-bundler.js?830f:339:35)

Somewhy visitInModal method is not available at this.$inertia

I also tried a separate function:

        popup(route) {
            Inertia.visitInModal(route, {
                pageProps: {
                    componentProps1: 'page',
                },
                modalProps: {
                    modalProps1: 'modal',
                }
            });
        }

but also got the error:

Uncaught TypeError: _inertiajs_inertia__WEBPACK_IMPORTED_MODULE_7__.visitInModal is not a function
    at Proxy.popup (Users.vue?d53d:206:13)
    at onClick._cache.<computed>._cache.<computed> (Users.vue?d53d:28:41)
    at callWithErrorHandling (runtime-core.esm-bundler.js?5c40:155:1)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js?5c40:164:1)
    at HTMLButtonElement.invoker (runtime-dom.esm-bundler.js?830f:339:35)
popup @ Users.vue?d53d:206
onClick._cache.<computed>._cache.<computed> @ Users.vue?d53d:28
callWithErrorHandling @ runtime-core.esm-bundler.js?5c40:155
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js?5c40:164
invoker @ runtime-dom.esm-bundler.js?830f:339

Looks like somewhy invoking (as I can say so) does not work and the method is not available in the imported Inertia

I can't even suggest how it could be attached to the Intertia instance.

Could you help, please?

[Tofandel]

Hello,

Did you follow the installation instructions? https://github.com/Tofandel/inertia-vue3-modal#client-side-installation

You need to import the component in a global template or the plugin is not going to be loaded

[musichook]

Yes, of course, I passed all steps.

The component is imported in app.js:

import { InertiaModal, ModalSlot } from "@tofandel/inertia-vue-modal";

and defined globally:

    .component('InertiaModal', InertiaModal)
    .component('ModalSlot', ModalSlot)

I don't know how it should add the method visitInModal() into the instance of Inertia (most likely I don't know/don't understand the nuances). Could you please clarify this?

Also, when installing with composer require tofandel/inertia-vue-modal it's notifying Using version dev-main for tofandel/inertia-vue-modal. Is it ok?

[Tofandel]

The method visitInModal is added when the InertiaModal component is being mounted, so make sure you have that component on the layout somewhere before calling visitInModal

Yes dev-main is fine, it's pretty much still an alpha but to be honest I don't think I'll continue building on it, I'm waiting to see some movement from inertia which looks pretty stale right now about the direction they're taking on this

[musichook]

I have added

   <InertiaModal>
            <ModalSlot />
        </InertiaModal>

components into the layout.

Users.vue uses this layout

But I still have the error when click on <button @click="$inertia.visitInModal('/user/create')">Load in modal</button>:

runtime-core.esm-bundler.js?5c40:218 Uncaught TypeError: _ctx.$inertia.visitInModal is not a function
    at onClick._cache.<computed>._cache.<computed> (Users.vue?d53d:29:50)
    at callWithErrorHandling (runtime-core.esm-bundler.js?5c40:155:1)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js?5c40:164:1)
    at HTMLButtonElement.invoker (runtime-dom.esm-bundler.js?830f:339:35)

Also, before the error above I got this warning at the click moment:

runtime-core.esm-bundler.js?5c40:38 [Vue warn]: Unhandled error during execution of native event handler 
  at <DefaultLayout> 
  at <Users errors= {} flash= {message: null, success: null, error: null} filters= {search: null, field: null, direction: null}direction: nullfield: nullsearch: null[[Prototype]]: Object  ... > 
  at <Inertia initialPage= {component: 'Users/Users', props: {…}, url: '/backend/users', version: '7628db27e7735c75e04a659b91817b1c', scrollRegions: Array(0), …}component: "Users/Users"props: {errors: {…}, flash: {…}, filters: {…}, users: {…}, app: {…}, …}rememberedState: {}scrollRegions: []url: "/backend/users"version: "7628db27e7735c75e04a659b91817b1c"[[Prototype]]: Object resolveComponent=fn<resolveComponent> > 
  at <App>

Looks like for some reason the visitInModal is not adding when components are mounted...

Do you have a working example, something like a demo project, probably?

[musichook]

I see in the source code the lines where the injection (not sure that is the right wording) of the new method happening if I'm not wrong.

Could you please clarify this piece a bit?

watch(() => props.modalKey, (key) => {
  const fn = `visitInModal${key}`;
  // @ts-ignore
  Inertia[fn] = visitInModal;
}, { immediate: true });

[Tofandel]

Yes, that's correct

I added the possibility to have multiple instances of the modal at the same time using a modal key to have nested modals and such, which is what you see there, it's in an immediate watcher, so as soon as the component is mounted the method should be available

You could also try to add a breakpoint on the line Inertia[fn] = visitInModal; to make sure it's executed

Can you do a npm why @inertiajs/inertia

And paste the output, let's make sure you don't have multiple inertia instances bundled in your project

[musichook]

Uncaught TypeError: _inertiajs_inertia__WEBPACK_IMPORTED_MODULE_7__.visitInModal is not a function
    at Proxy.popup (Users.vue?d53d:206:13)
    at onClick._cache.<computed>._cache.<computed> (Users.vue?d53d:29:41)
    at callWithErrorHandling (runtime-core.esm-bundler.js?5c40:155:1)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js?5c40:164:1)
    at HTMLButtonElement.invoker (runtime-dom.esm-bundler.js?830f:339:35)

It looks like somewhy required components are not imported (but the mix has no error notices) IDE highlights this path @tofandel/inertia-vue-modal with 'Module is not installed' warning.

In the package.json I see this in the dependencies: "@tofandel/inertia-vue-modal": "file:vendor/tofandel/inertia-vue-modal", Probably it's ok.

But I tried to move the source code out of the vendor folder and put it near the other scripts. Now trying to make TS compiled in the right way and together with regular JS. It becomes hard to resolve.

[Tofandel]

Try replacing "@tofandel/inertia-vue-modal": "file:vendor/tofandel/inertia-vue-modal" with "@tofandel/inertia-vue-modal": "^0.2.26" and run npm install, looks like your system is having issues with npm symlinks, but I find it weird that it would fail at this stage and not at the import stage

[musichook]

"@tofandel/inertia-vue-modal": "^0.2.26" is not help (I have removed node_modules, package-lock.json and then run npm install)

The same error

Uncaught TypeError: _inertiajs_inertia__WEBPACK_IMPORTED_MODULE_7__.visitInModal is not a function

(I think the reason why it was "@tofandel/inertia-vue-modal": "file:vendor/tofandel/inertia-vue-modal" is npm i vendor/tofandel/inertia-vue-modal which gets dependency from vendor/tofandel/inertia-vue-modal instead of NPM)

[Tofandel]

Yes it is, but then it confirms that you are trying to use the modal without actually having mounted the InertiaModal component, or that you have multiple Inertia installed and that there is no issue with the package, but since you didn't give me the npm why @inertiajs/inertia I can't verify