Unable to locate the exported component within the Vuejs project

I am facing an issue with exporting a custom Vue component from my package in the component library.

For example, my component library named ComponentLib has the following folder structure, and the custom component to be exported is called icon.vue

|-src
  |-components
    |-icon.vue
  |-index.ts
  |-package.json...and other config files

The file path for the custom icon component is

ComponetLib/src/components/icon.vue

<template functional>
    ...
</template>

<script lang="ts">
    import { Vue, Component, Prop } from 'vue-property-decorator';
    import { IconModel } from '../index';

    @Component({})
    export default class IconComponent extends Vue {
        @Prop()
        icon!: IconModel;
    }
</script>

The file ComponentLib/src/index.ts looks like this:

export type IconModel = {
    id: string;
    content: string;
}

export { default as Icon } from 'components/icon.vue';

After building, I can see the types being exported in the dist folder, such as:

|-dist
  |-...
  |-types
    |-components
      |-icon.vue.d.ts
    |-index.d.ts
    |-package.json

The contents of dist/types/index.d.ts:

export declare type IconModel = {
    id: string;
    content: string;
};
export { default as Icon } from 'components/icon.vue';

Now, let's talk about the structure of MainProject

|-src
  |-components
    |-profile.vue --> imports @ComponentLib/components/icon.vue
  |-index.ts
  |-package.json...and other config files

The profile.vue file imports the custom icon.vue component using:

import Icon from '@ComponentLib/types/components/icon.vue';

However, during compilation, there is an error stating that the module cannot be found and the reference cannot be resolved.

If the same component is placed within MainProject/src/components folder, the compiler works without any issues. This makes me question if there is something wrong with the export. But I'm unsure where the mistake lies.

Answer №1

It seems that the method I used to import the Icon component was incorrect. The correct way to do it is:

import { Icon, IconModel } from '@ComponentLib/components';

After that, include the Icon component in the

@Component({components: {Icon }})
decorator.

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

Exploring Angular Scope within a Typescript-based javascript function

My current setup involves Typescript with Angular combined with Breezejs. class CounterController { count: number = 0; static $inject = ['$scope']; constructor($scope) { $scope.vm = this; } setCount14(): void { ...

Having trouble with VueJS transition not triggering on "enter"?

I am attempting to create a simple collapsible menu transition. The code for my element is as follows: <transition name="settings"> <div v-show="!settingsCollapsed"> </div> </transition> Here is the CSS associated with it: ...

Is there a way to implement full-page scrolling in Vue?

Looking for a Vue equivalent of the fullpage.js library. Need a component that allows scrolling through elements similar to fullpage.js. ...

Passing the v-model property from a child component to a parent in VueJS

Consider a scenario where there is a Vue component structured like the following: Vue.component('child-comp',{ props:['name', 'val'], data: function(){ return { picked: '' } }, ...

Exploring Vue.js nested slots: a guide on transferring slots to grandchildren

I have been utilizing various Vuetify components, such as the v-menu. The template structure for this component looks like this: <v-menu> <a slot="activator">menu</a> <v-list> <v-list-tile>Menu Entry 1</v-list-tile ...

What is the process for converting error messages in veevalidate into a different language?

I am facing an issue with validating forms in real-time using Vue and VeeValidate within Laravel. The error messages are displaying in English on the veevalidate page, but I find the example provided to be unclear. Can anyone offer guidance or assistance? ...

Vue.js and axios causing an empty array after the page is refreshed

As a newcomer to coding and using vue cli, along with my limited English skills, I apologize if I am unable to articulate the issue clearly. However, I am reaching out to the community for assistance. The code snippet below is from store.js where I fetch ...

The functionality of Jquery is successfully integrated into a specific function, however it seems to only work for one of the calls. To make the other call work,

After a user makes a selection, I am attempting to reset the 'selected' item. This process calls the Vue function tS() shown below. The issue lies with the first call $('#sel1').prop('selectedIndex',0);, as it only seems to wo ...

Guide on serving Vue's static dist folder using express with app.use('someRoute')

I have encountered an issue while serving a dist folder from a vue app (created with create-vue-app). Everything works fine when I use the root route without specifying any sub-routes. However, when I point to a specific sub-route like '/static', ...

What type of data payload could be expected?

I am executing a graphql mutation: interface LogInResponse { email: { accessToken: number; } } const [logIn] = useMutation<LogInResponse>(LOG_IN); let submitForm = (email: string, password: string) => { setIsSubmitted(true); lo ...

The rapid execution of code causing an observable race condition

When exporting a CSV file in my code, I encounter a race condition while trying to modify some data before the export. The issue is that the id gets set correctly, but the number only updates after the method is called a second time. I believe the proble ...

Is it possible to extract Apollo type guards from a package?

I came across a helpful Apollo type guard that I want to integrate into my app. Here is the code snippet: export function isField(selection) { return selection.kind === 'Field'; } You can find it in node_modules/@apollo/client/utilities/grap ...

Eliminate the localhost:8080 portion from the axios request URL

Encountering an issue with backend requests, where Axios continues to use localhost as the base URL before appending the backend URL. GET http://localhost:8080/127.0.0.1:8000/api/projects 404 (Not Found) I've attempted a few solutions. Initially, I ...

The retrieved item has not been linked to the React state

After successfully fetching data on an object, I am attempting to assign it to the state variable movie. However, when I log it to the console, it shows as undefined. import React, {useState, useEffect} from "react"; import Topbar from '../H ...

Ways to set a default value for a function that returns an unknown type in TypeScript

In my code, I have a customizedHook that returns a value of type typeXYZ || unknown. However, when I try to destructure the returned value, I encounter an error TS2339: Property 'xyz' does not exist on type 'unknown', even though the da ...

Creating dynamic templates and embellishments in VUE

My VUE components, including Field and Form, are able to dynamically render a form based on the provided data. <template> <form @submit="$emit('submit', $event)" > <template v-for="(item, index) in form.elemen ...

The response from my reducer was a resounding "never," causing selectors to be unable to accurately detect the state

Currently utilizing the most recent version of react. I am attempting to retrieve the state of the current screen shot, but encountering an error indicating that the type is an empty object and the reducer is "never". I am unable to detect the state at all ...

Manipulate HTML elements using JavaScript when a key is being held down

I'm currently developing a simple game using vueJS for the frontend. I have successfully created all the necessary objects and now my goal is to enable their movement when a key is pressed. However, I am facing an issue where the object only moves on ...

Using Intersection Observer in Typescript causes a bug when utilized with useRef

Currently, I have a text animation that is functioning flawlessly. However, my goal now is to implement an Intersection Observer so that the animation only triggers when I scroll down to the designated box. To achieve this, I utilized the useRef React hoo ...

Is it possible for an object literal to include a property that can be rendered using ngComponentOutlet?

When attempting to render each component using ngComponentOutlet in a specific column layout with subsequent styling, the component property within widgetsByCol is returning null in the HTML, even though the components are visible when logging them through ...