Vite Vue-TS Custom Component Library : Missing "..." export in "..." package

Viewed 38

i'm trying to build my own Component-Library with Vue and Typescript. Vite is used for the bundling process. The Component-Lib does only have two components because I wanted to test the whole process before I dive deeper. So the components are basically buttons which have some props attached to them. The entry point for the bundling process is an index.ts which exports the components:

//[src/index.ts]

export { default as Button } from "./components/button/Button.vue";
export { default as CircleButton } from "./components/button/CircleButton.vue";

For example we have a button which imports the following types from the index.ts:

//[Button.vue]

import { ButtonType, ButtonFont } from "./index";

export interface ButtonProps {
  value: string;
  type: ButtonType;
  fontType: ButtonFont;
}

const props = withDefaults(defineProps<ButtonProps>(), {
  value: "Test",
  type: ButtonType.Default,
  fontType: ButtonFont.Medium,
});
//[src/components/button/index.ts]

export enum ButtonType {
  Default = "default",
  Primary = "primary",
}

export enum ButtonFont {
  Small = "small",
  Medium = "medium",
  Big = "big",
}

export interface ButtonModel {
  value: string;
  type: ButtonType;
  fontType: ButtonFont;
}

After bundling with : "vite build && vue-tsc --declaration --emitDeclarationOnly" i'll get the following output in my dist folder.

- App.vue.d.ts
- index.d.ts
- main.d.ts
- components/button/index.d.ts
- components/button/Button.d.ts
- components/button/CircleButton.d.ts

I'm currently fine with those d.ts files because they have the content that I expected. The index.ts which provide the enums and interfaces for the Button.vue results in

// [index.d.ts]

export declare enum ButtonType {
    Default = "default",
    Primary = "primary"
}
export declare enum ButtonFont {
    Small = "small",
    Medium = "medium",
    Big = "big"
}
export interface ButtonModel {
    value: string;
    type: ButtonType;
    fontType: ButtonFont;
}

So everything looks fine to me until this moment. I can point to e specific enum in Button.vue.d.ts and my IDE (VSCode) can jump to the location of the specific enum. When im now trying to use this library in a different project:

<script setup lang="ts">
import {Button} from 'library';
</script>

<template>
   <Button :type="" value="Test"/>
</template>

then my IDE is saying that the type for the property type should be ButtonType or undefined. So thats what i expected. Everything is totally fine. enter image description here

But now my IDE cant access the enums and interfaces which were declared before and are necessary for the Button. I can't type <Button :type="ButtonType.Primary" /> becasue my IDE can't find the specific type. So I imported the ButtonType import { ButtonType } from "library/dist/components/button"; and therefore I can use the Button like this: <Button :type="ButtonType.Primary" value="Test" />. Now my IDE nows were the ButtonType is stored and finds the specific enum. But now is vite complaining because Missing "./dist/components/button" export in "library" package.

Can someone help me with the solution of this problem or has simiular issues with this topic?

0 Answers
Related