在 Vuejs 项目中找不到导出的组件

Question

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.

Answer 1

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.