vite-aliases
vite-aliases copied to clipboard
Subwaytime
Use with Storybook
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?
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?
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!
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. :thinking: But i am just assuming here, will take a deeper look!
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!
Workaround for now would be using the generated log file and manually extending your vite.config with it