Cannot infer type of MapboxGeocoder because of missing specifier of MapboxGeocoder.vue

[robigan]

The docs say that I can use Template Refs to access the Geocoder object. And that I can infer the type of ref using InstanceType and typeof. The problem here is that MapboxGeocoder is a UMD global overriden by the MapboxGeocoder namespace. Attempting to import the right MapboxGeocoder directly from the .vue file presents an issue of the specifier missing in the package. With the error specifically stating: [plugin:vite:import-analysis] Missing "./dist/runtime/components/Geocoder.vue" specifier in "nuxt-mapbox" package.

Problematic line of code: const geocoderRef = ref<InstanceType<typeof MapboxGeocoder>>();

I propose to either natively export that component to types.d.ts or add whatever the error is asking to be specified, presumably to package.json. For the moment, I can import it using the full path specification of the file. I've had to do similar things for @nuxt/ui to extend their component, maybe I'm missing something?

[AlexLavoie42]

Have you tried importing the component from #components instead of directly from the vue file like I do in the playground? I've learned from running into this issue before to always use #components and #imports as it usually fixes it.

[robigan]

That helps it, but now it complains about how I can't use :ref="geocoderRef" and how The type 'InstanceType<typeof MapboxGeocoder>' is not assignable to type 'VNodeRef | undefined'

[robigan]

Have you tried importing the component from #components instead of directly from the vue file like I do in the playground? I've learned from running into this issue before to always use #components and #imports as it usually fixes it.

I wish Visual Studio Code would pick up on this kind of import, I might have an incorrect IDE setup so I'll look into that thanks.

[AlexLavoie42]

That helps it, but now it complains about how I can't use :ref="geocoderRef" and how The type 'InstanceType<typeof MapboxGeocoder>' is not assignable to type 'VNodeRef | undefined'

This seems like a local environment issue to me, try updating Nuxt & TS if you can, and make sure you restart your Vue & TS language servers (I often see erroneous type errors that go away after a restart).

If this is happening consistently and you are able to reproduce a copy that you can share I am glad to help though!

[robigan]

That helps it, but now it complains about how I can't use :ref="geocoderRef" and how The type 'InstanceType<typeof MapboxGeocoder>' is not assignable to type 'VNodeRef | undefined'

This seems like a local environment issue to me, try updating Nuxt & TS if you can, and make sure you restart your Vue & TS language servers (I often see erroneous type errors that go away after a restart).

If this is happening consistently and you are able to reproduce a copy that you can share I am glad to help though!

Yeah, I'll attempt tomorrow, wasn't compiling properly so I'll have to try tomorrow. It's a project for an enterprise so I'll attempt to recreate it in a testing project but I'll be mad if I can't.

[robigan]

Well, I was sure as shit stupid, but the docs aren't clear about how the ref property needs to be set without v-bind, as I had set it using :ref instead of ref. Makes things very hard to debug.

[AlexLavoie42]

😂 I have been there for sure. I do have an example of setting the ref on the HTML in the docs but I am always open to suggestions for improvements!

[robigan]

😂 I have been there for sure. I do have an example of setting the ref on the HTML in the docs but I am always open to suggestions for improvements!

Yup. But the Vue docs don't which would be really nice for Volar to let me know too.