Question 321917 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to fix module resolution when implementing `unplugin-vue-components`?

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']
},
// ...

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

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

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

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?

Tags:

2

Answers


  1. 0

    First things first: did you configure vite to work with Vue, are sfc recognised when not using unplugin-vue-components?
    If not make sure to install required dependencies:

    • @vitejs/plugin-vue
    • @vue/compiler-sfc (this one is responsible for compilation of vue
      single file components)

    After having those installed update your vite.config.js, it should look something like this:

        import vuePlugin from '@vitejs/plugin-vue'
    import Components from 'unplugin-vue-components/vite'
    
    export default defineConfig({
      plugins: [
        vuePlugin(),
        Components({ /* options */ }),
      ]
    })

    Hope it helps 🙂

    Login or Signup to reply.
  2. 0

    As I know ,this plug find a component only by component path but name,so you need let the component using name same to the path name ,try to change the file name to FlighterLinkWrapper.vue from LinkWrapper.vue

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search