Use with Storybook - Githubissues

Subwaytime / vite-aliases

Alias auto generation for Vite

https://www.npmjs.com/package/vite-aliases

MIT License

213 stars 13 forks source link

Use with Storybook #49

Open mattfelten opened 1 year ago

mattfelten commented 1 year ago

Just got the package working for my app and it was super easy. My issue is Storybook is not finding any of the aliases. I followed the Storybook docs to use the resolvers from my config which didn't work. I'm realizing it's trying to pull directly from the vite config, which doesn't have any. I need it to read from vite-aliases somehow.

Any ideas for how to get Storybook resolving the aliases correctly?

mattfelten commented 1 year ago

So I read that the upcoming version of Storybook 7 is going to use vite.config.js by default, so I upgraded to the pre-release to try that out. I wanted to see if Storybook would detect the plugin and just do the right thing. A number of cryptic errors showed up (it is a pre-release after all...) and trying a few things out, removing vite-aliases ended up getting Storybook working just fine.

import { URL, fileURLToPath } from "url";
import { defineConfig } from "vite";

export default defineConfig({
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
});

^ I also tested that Storybook can pick up alias resolvers when declared in the config, which it does.

I prefer the style this plugin uses, and that it takes no configuration. Any ideas how to get it working with Storybook though?