I am building a vue storybook component library with vite called my-storybook. I configed it to resolve alias @ to /src.

// .storybook/main.js
module.exports = {
  // other configs
  // ........
  async viteFinal(config, { configType }) {
    return {
      ...config,
      resolve: {
        alias: [
          {
            find: "@",
            replacement: path.resolve(__dirname, "./src"),
          }
        ],
      },
    };
  },
};

// tsconfig.json
{
  "compilerOptions": {
    // other properties
    // ....

    "paths": {
      "@/*": ["src/*"]
    }
  },
}

I added a component to this library. This component, MyComponent, depends on other components which I imported it using alias. I am able to build my-storybook library without any issues.

//MyComponent.vue
<script setup>
import MyButton from '@/components/MyButton.vue';


<script/>

However, when I consume this library my-storybook on an application. I got below errors.

Failed to resolve import "@/components/MyButton.vue" from "node_modules/@company/my-storybook/src/components/MyComponent.vue". Does the file exist?