What is the solution for resolving module issues when working with `unplugin-vue-components`?

I'm currently working on integrating unplugin-vue-components into my project to streamline the process of registering first-party plugin components across all my individual projects. However, I'm encountering difficulties in getting Vite to properly identify the named/exported Vue Components within my Single File Components (SFCs)...

Here's the error output from the console:

An issue has arisen: The requested module '/flighter/resources/js/components/LinkWrapper.vue' does not have an export named 'FlighterLinkWrapper'. SyntaxError: The requested module '/flighter/resources/js/components/LinkWrapper.vue' does not have an export named 'FlighterLinkWrapper'.

Extract 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'];
// ...

Snippet 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 content of my 

flighter/resources/js/components/LinkWrapper.vue
file is as follows:

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

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

I have verified that the issue does not lie with the resolution of the Vue SFC itself... it seems to be related to the proper interpretation of the file or a potential mismatch in module names, if that makes sense?

My Development 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; Has anyone successfully set up unplugin-vue-components in their projects before?

javascripttypescriptvue.jsvite

Answer №1

From my understanding, this plugin locates a component based on the component path rather than its name. Therefore, you should ensure that the component's name matches the path name. I recommend renaming the file to FlighterLinkWrapper.vue instead of LinkWrapper.vue.

Answer №2

Before anything else, have you set up vite to function with Vue? Are single file components recognized without the use of unplugin-vue-components? If not, ensure that you install the necessary dependencies:

  • @vitejs/plugin-vue
  • @vue/compiler-sfc (essential for compiling Vue single file components)

Once you have these dependencies installed, update your vite.config.js file like this:

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

I hope this information proves useful :)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Counting occurrences of characters in a string: A simple guide

I'm working on a function to identify characters from an array within a given string and count how many of them are present. I've attempted to cover every possible pattern, but the task seems overwhelming. I also experimented with the alternativ ...

javascriptarraysstring

Initiating an AJAX call in Vue.js using Vue-Router prior to the application launch

I'm currently developing a basic application that allows users to login, reset their password, and perform other actions once they are logged in. Additionally, I am utilizing Vue-Router and aiming to define 3 different types of routes: Routes acces ...

vue.jsvuejs2vue-router

Update to the center of the JavaScript map on Google Maps

Hello everyone, While I may not consider myself a JavaScript expert, I often piece together code snippets from various sources to get things done. Currently, I am facing a challenge with styling Google maps as they don't seem to be customizable unles ...

javascripthtmlgoogle-maps

Is there a way for me to discover the top trending photos on Instagram today?

Finding information on the Instagram API can be quite challenging due to poor documentation. Is there a method available to discover the most liked Instagram photos by location, such as identifying the top picture liked by Danish users today? Any insight ...

javascriptphpjsoninstagram

Limit the parameter of a TypeScript method decorator based on the method's type

Is it possible to generically restrict the argument of a method decorator based on the type of the method it is applied to? I attempted to obtain the method's type that the decorator is applied to using TypedPropertyDescriptor<Method>. However, ...

typescripttypescript-genericstypescript-decorator

Leverage the AJAX response data for another JavaScript function

I am interested in utilizing the data received from an AJAX response in another JavaScript function. Here is the AJAX call located in the view file (sell_report.php): <script src="<?php echo base_url(); ?>public/js/jquery-1.12.4.min.js"> ...

javascriptphpjqueryajaxcodeigniter

Encountering a 404 error when attempting to use the jQuery .load() function with parameters that include periods ('.')

I am attempting to invoke a controller function using the .load() method, but encountering an error which might be caused by the encoding of '.'. The call I am making is as follows: $("#main-content").load( url + "/" + encodeURIComponent(text ...

javascriptphpjqueryajaxcodeigniter

Retrieve and dynamically load an entire webpage using AJAX

Although it's typically not recommended, I am interested in displaying the progress of a download on a heavy page to show the user when it's ready. Is there a way for me to track and display the actual progress of the download? Can I monitor how ...

javascriptjqueryajaxload

Create the accurate data format rather than a combination in GraphQL code generation

In the process of migrating a setup that mirrors all the types exactly as on the server to one based solely on the document nodes we've written. Currently, the configuration is in .graphqlrc.js /** @type {import('graphql-config').IGraphQLCo ...

typescriptgraphqlcode-generationgraphql-codegen

Pinia throws a useStore is not callable error

I have been trying to resolve the issue with (0 , pinia__WEBPACK_IMPORTED_MODULE_1__.useStore) is not a function but unfortunately, I haven't been able to find a solution. Can anyone point out what mistake I am making? Here is my store.js code: im ...

javascriptvue.jsvuejs3pinia

What should be the proper service parameter type in the constructor and where should it be sourced from?

Currently, I am faced with a situation where I have two Angular 1 services in separate files and need to use the first service within the second one. How can I properly type the first service in the constructor to satisfy TypeScript requirements and ensure ...

angularjstypescript

How can Vue JS be used to assign numbers to specific elements in an array that meet certain conditions?

Imagine having an array of objects within your Vue state like the following: [ {name: "Daniel", default: false}, {name: "Ross", default: true}, {name: "Rachel", default: false}, {name: "Joey", default: false} {n ...

javascriptvue.js

Regular expressions should be of a specific length and include both letters and numbers

I am trying to create a regular expression that can identify substrings of length 10-15 containing only [A-Z0-9], with at least one letter and one number (spaces are permissible but not other special characters). Here are some examples: ABABABABAB12345 sh ...

javascriptpythonregex

Is there a way to delay the closing of the browser until the server call is finished?

I am attempting to invoke a service that updates data upon browser close or tab close. The issue I am facing is that the service call uses $http and is asynchronous, so I believe that the browser unload event is cancelling the call and closing the browser. ...

javascriptangularjsajaxhttpbrowser

After mistakenly running `npm run dev`, Laravel continued to execute development assets on the production server without any regard

After executing npm run dev on the server with Laravel 9 using Vite and Tailwind, I encountered an issue where npm run build was still attempting to load css and javascript files from domain 127.0.0.1. Despite running npm run build without errors, it faile ...

laravelnpmvitenpm-package

Create a duplicate of the sapUI5 JSON model and end the data binding process

I've encountered a similar issue, but the solution doesn't seem to work for me. I have a JSON model named "data" that represents a SAPUi5 form with comboboxes. My goal is to capture the initial state of the model when the application is first ope ...

javascriptjsonbindingsapui5model-binding

Angular 5: Unable to add a destroyed View to a ViewContainer

I encountered a new error in my Angular application that I haven't seen before. The issue is arising from this specific line in the Angular source code. This error occurs when I log out and then log back into my app. While on a certain route, there i ...

angulartypescript

Alter the database field value in MongoDB without relying on req.body inputs

Is there a way to update a value from X post in my database without using a form in my front end app? I need to trigger the update through a button click instead. Typically, we use req.body to send data from a form. But how do I handle updating the value ...

javascriptnode.jsreactjsmongodb

experiencing a fault in the Magento platform

Every time I visit my website, I am faced with the following issue (I retrieved this error file from the var folder): a:5:{i:0;s:88:\"Cannot send headers; headers already sent in /home/eyewear/public_html/index.php, line 1\";i:1;s:943:\"# ...

javascriptphpmagento

What is the recommended depth in the call stack to utilize the await keyword for an asynchronous function?

My knowledge of async functions in TypeScript/React is fairly basic. I have two API calls that need to be made, and I am using async functions to call them from my UI. It's crucial for these calls to have completed before rendering the component corre ...

javascriptreactjsasynchronousasync-await