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.