I am currently having an issue with exporting a custom Vue component from my component library package.
Let's say, ComponentLib
has following folder structure, where my custom component to be exported is called icon.vue
|-src
|-components
|-icon.vue
|-index.ts
|-package.json...and other config files
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>
ComponentLib/src/index.ts
export type IconModel = {
id: string;
content: string;
}
export { default as Icon } from 'components/icon.vue';
After building, in this dist
folder, I can see following types being exported.
|-dist
|-...
|-types
|-components
|-icon.vue.d.ts
|-index.d.ts
|-package.json
dist/types/index.d.ts
export declare type IconModel = {
id: string;
content: string;
};
export { default as Icon } from 'components/icon.vue';
Here's the structure for MainProject
|-src
|-components
|-profile.vue --> imports @ComponentLib/components/icon.vue
|-index.ts
|-package.json...and other config files
profile.vue
imports the custom icon.vue
component via
import Icon from '@ComponentLib/types/components/icon.vue';
but when I compile, I got an error saying module not found
and it can't resolve this reference.
But when I put the same component within MainProject/src/components
folder, and the compiler seems happy. It kind of occurs to me that something might be wrong with the export. But I am not sure which part I have missed or done wrong.
Apparently the way I imported the Icon component wasn't correct, and it's supposed to be like
import { Icon, IconModel } from '@ComponentLib/components';
And then add Icon component to @Component({components: {Icon }})
decorator.