Trouble reusing Inertia components as a separate package (this.resolveComponent is not a function)

[uneven agate]

I'm developing a laravel-inertia-vue project that has some frequently used UI components that I've extracted to it's own package for reuse on other package (imported as a git repo dependancy), 2-3 of these component use inertia features like usePage, useForm & Link, making the package dependant on the @inertiajs/vue3 package.

When I try to import the custom Link component that extends on the inertia link component (it wraps it in some visual non functional styling), the Link seems to render correctly, but when clicked the following error is thrown in the console: this.resolveComponent is not a function.

So far I've only tried getting the Link component to work, I haven't tested the other components which utilize the usePage and useForm functions.

I've tried registering the component in the main project's createInertiaApp call but to no avail, I was hoping to not have to register each component separately.

The package itself is a simple vite app that compiles all components (tailwindcss is also used in the package) and exports them as a dist bundle. The package does not initialize a vue or interia app, perhaps this is the step them I'm missing? (if yes, wouldn't that conflict with the main project's vue/inertia app?)

A question about this has also been posted on stackoverflow, but so far no takers: https://stackoverflow.com/questions/78861509/inertiajs-vue-component-library

Any help would be greatly appreciated.

[uneven agate]

From what I can gather so far, when the link is clicked, the network request is sent to the backend about the event, and the response indicated the component that needs to be rendered, but since the package is not aware of this component, it can't resolve it. How do I go about setting my inertia app to handle external components or perhaps the other was around, have the link component hook into the main inertia app to be able to resolve components?

[neat sigil]

You'd need to make those components part of your app, Inertia can't render something that isn't there. So in your app.js you'd need to return the matching component in the render method

[uneven agate]

@neat sigil I've tried registering the componet in the core app createInertiaApp .component('ThemedLink', ThemedLink) but I'm still getting the same error.

[neat sigil]

Yeah, that won't work.

You'd need to edit this; https://inertiajs.com/client-side-setup#initialize-the-inertia-app, most notably the render method, if you want to render those pages.

[uneven agate]

The rendering itself is working, it's handling the router/page visit that's broken.

[neat sigil]

That snippet would only render components from the Pages directory, so if you render MyThing/Index and that doesn't exist, then it won't work. You'd need to also check your custom components

Then it's probably because you're dealing with dual depedencies, so you'd need to use a peer dependency, as you likely have multiple instances of Inertia and not using the one from the app

Either way, if it's just a component library, why are you performing navigations inside those components? That seems to nullify extracting the components in the first place.
Why not leverage events? For example, use events. Like a button component, you'd expose the @click event, then in your app you can do whatever you want.

[uneven agate]

Perhaps I didn't explain myself clearly, there are no pages in the external package, only components, the external components are rendering fine, when they try to use inertia app functionality though like visiting a page or resolving a component, the external package is trying to do it instead of the core project. The external package has no idea about the pages available.
I'm only calling createInteriaApp once in the main package.

The Link component is one of those component that's used a lot across the application and has a custom theme applied, other components depend on it as well. Rather than having the custom themed Link component duplicated in every project, the thought was to extract it to a separate UI package to be reused, I didn't realize that it would actually break the functionality of the underlying Inertia Link component it's using.
You're right that it is performing navigation, there are plenty of Component Libraries that have Link components and yes when they are clicked is causes navigation.

[neat sigil]

there are plenty of Component Libraries that have Link components and yes when they are clicked is causes navigation
Well no. Those either just render to anchor tags, or provide events for you to hook into. Inertia's Link component isn't just a link, it performs an XHR request

[uneven agate]

That's a good point. I stand corrected.
(From what I can see, the XHR request is working fine, it's the response that's is being handled by the external package causing the issue.) Is there no way of having the Link component use the main app's router? Is there no way of depending on the Link component from outside the project yet still have it's routes/pages resolved by the core app?

[neat sigil]

Yeah, I think that would cause two "instances" of Inertia, similar to what would happen if you use Inertia 0.x together with 1.x