cjholowatyj's avatar

unplugin-vue-components for auto-registering vue components?

Hey everyone! I'm working on getting unplugin-vue-components working with my project so I don't have to register all of my first-party plugin components all through my individual projects... I'm having trouble getting Vite to recognize the named/exported Vue Components in my SFCs...

Console Log:

An error occurred: The requested module '/flighter/resources/js/components/LinkWrapper.vue' does not provide an export named 'FlighterLinkWrapper' SyntaxError: The requested module '/flighter/resources/js/components/LinkWrapper.vue' does not provide an export named 'FlighterLinkWrapper'

From my generated components.d.ts file:

// ...
FlighterLink:typeof import('flighter/js/components/Link.vue')['FlighterLink'];
FlighterLinkWrapper:typeof import('flighter/js/components/LinkWrapper.vue')['FlighterLinkWrapper'];
FlighterMapLink:typeof import('flighter/js/components/links/Map.vue')['FlighterMapLink'];
// ...

From my vite.config.ts file:

// ...
resolve: {
    alias: [
        {find: '@js/', replacement: path.resolve(__dirname, `resources/js`) + '/'},
        {find: /^@?flighter\//, replacement: path.resolve(__dirname, `flighter/resources`) + '/'}
    ],
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json']
},
// ...

I've already confirmed that the issue is not with the Vue SFC trying to be resolved itself... something to do with the file not being interpreted properly, or a module name mismatch if that makes sense?

My Dev Stack: Laravel 10/InertiaJS 1/VueJS 3/ViteJS 4/TailwindCSS 3/Vitest 0.31/VitePress 1/Typescript/SSR FontAwesome Pro 6/Ploi.io/Qodana/Cypress/ImgIX/HubSpot/SendGrid/SignEasy/Stripe

TL;DR; Anyone have experience setting up unplugin-vue-components in one of their projects?

0 likes
2 replies
cjholowatyj's avatar

And almost forgot...

The contents of my flighter/resources/js/components/LinkWrapper.vue file include:

<script lang="ts" setup>
// ...
</script>

<script lang="ts">
export default {
	name: 'FlighterLinkWrapper'
};
</script>
amitsolanki24_'s avatar

@cjholowatyj

Add this into your component file This error is occurring because you calling component from FlighterLinkWrapper name but you can't export that component with this name

Please or to participate in this conversation.