Use with Storybook

[mattfelten]

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]

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?

[Subwaytime]

Have you tried the newest release? v0.10.0 - That mightve fixed the issue with storybook 7!

[mattfelten]

Yeah unfortunately it was v0.10. I just set it up a few hours ago.

[Subwaytime]

Ok thanks for the update!
It would be great if you could setup a reproduction and send over the cryptic errors that you discovered, that would help in debugging as i havent used storybook so far!

[mattfelten]

Here you go https://github.com/mattfelten/vite-aliases-storybook-demo

[Subwaytime]

I think the issue might be that vite-aliases is adding the aliases on dev/build of the vite server, while storybook seems to need them "hardcoded" in. 🤔 But i am just assuming here, will take a deeper look!

[Subwaytime]

Found a solution, so i will be working on this in the following weeks!

[viclafouch]

Hey @Subwaytime ! What is your solution ? Ty !

[Subwaytime]

Essentially the best and easiest way right now is to let vite-aliases write into the vite.config file itself via an option. As in writeToConfig or something. 🤔 The other solution i am currently testing is creating a .d.ts, which would be automatically extending the vite.config.. but both seem valid to fix this!