How can I use path aliases in a storybook library in a way that aliases are resolved when used by library consumers?

[vchan14]

Summary

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?

Additional information

No response

Create a reproduction

No response

[Marklb]

I am not very familiar with Vue, but I think I get what you are asking. From the way your question is worded it sounds like you may be thinking about what Storybook is, incorrectly.

Storybook is an application that consumes your components to create stories. Those stories are primarily for documenting and testing the components that you would publish for use in an application. When you build Storybook, the output is the Storybook application that uses your components in it's stories.

If you define aliases in .storybook/main.js, that is only for configuring the Storybook application.

If you are creating a component library then you want to think of Storybook as your documentation and testing tool, so it isn't used by applications that depend on your library. Hosting the built Storybook application as documentation can be very helpful to developers that want to look at the stories to see how to use the libraries components.

Your component library should be published the same as you would without Storybook, just like how you don't publish your library's unit tests as part of your library.

You may be able to fix the error by configuring aliases in the application that is using your library, but I assume Vue probably has a tool for building library components that would bundle them for publishing with aliases already resolved.

[vchan14]

Thanks for pointing me to the right direction. I will look into how we bundle the library. Will report back.

[vchan14]

Like @Marklb said, The issue is with how we build our component library. We can resolve path alias through configuring the build process of our bundler. For vite, you can specify build.lib https://vitejs.dev/config/build-options#build-lib

Found this explanation here helpful https://www.youtube.com/watch?v=5QV9wVc8c7g